1

Quero deixar meu TextField com uma altura especifica, mas quando o usuário digita um texto maior que o campo acontece isso que está ilustrado no gif abaixo.

gif ilustrativo

Não adianta diminuir o tamanho da fonte. Aumentar o tamanho do campo resolve o problemas mas fica visualmente feio. Como posso resolver esse problema?

Esse é o código do campo TextField

Container(
   height: 45,
   padding: EdgeInsets.symmetric(horizontal: 10),
   child: TextField(
      controller: cNome,
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
         border: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor2()),
            borderRadius: BorderRadius.circular(60)
         ),
         labelText: 'Seu Nome',
      ),
   ),
)

2 Respostas 2

1

Uma saída é você tentar trabalhar com o contentPadding.

Vou deixar um exemplo abaixo, testa ai e vê se atende ao teu caso:

 import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MyWidget(height: 20),
              SizedBox(height: 20),
              MyWidget(height: 40),
              SizedBox(height: 20),
              MyWidget(height: 60),
            ],
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  
  MyWidget({this.height});
  
  final double height;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      child: TextField(
        decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(12, 0, 12, 0),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60)
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60)
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(60)
          ),
          labelText: height.toString(),
        ),
      ),
    );
  }
}

Você pode rodar esse exemplo Dartpad (Basta copiar e colar).

1
  • 1
    Muito obrigado, funcionou perfeitamente. Commented 23/07/2020 às 13:12
1

Você pode adicionar o atributo maxLines, ele faz com que o texto não pule para linha de baixo quando exceder o limite do TextField.

Container(
   height: 45,
   padding: EdgeInsets.symmetric(horizontal: 10),
   child: TextField(
      controller: cNome,
      maxLines: 1, // ISSO FAZ COM QUE SEU TEXTO NÃO PULE PARA LINHA
      keyboardType: TextInputType.name,
      decoration: InputDecoration(
         border: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor()),
            borderRadius: BorderRadius.circular(60)
         ),
         focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyTheme.tintColor2()),
            borderRadius: BorderRadius.circular(60)
         ),
         labelText: 'Seu Nome',
      ),
   ),
)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .