Textfield
O widget TextField
no Flutter é usado para permitir que os usuários insiram texto em um campo de entrada. Ele fornece uma entrada de texto interativa para os usuários e pode ser personalizado de várias maneiras para atender às necessidades específicas do seu aplicativo.
Aqui está um exemplo básico de como usar o TextField
:
TextField(
decoration: InputDecoration(
labelText: 'Digite seu texto aqui',
),
)
Neste exemplo, o TextField
é criado com um rótulo (labelText
) que aparece acima do campo de entrada quando ele está vazio.
Controlando o Conteúdo do TextField:
Para controlar o conteúdo do TextField
, você pode passar um controlador (TextEditingController
) para o parâmetro controller
. Isso permite que você defina ou obtenha o texto do TextField
programaticamente.
TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Digite seu texto aqui',
),
)
Estilos e Decoração:
Você pode personalizar a aparência do TextField
usando a propriedade decoration
. Por exemplo, você pode alterar a cor do rótulo, a cor do texto, adicionar ícones, entre outras coisas.
TextField(
decoration: InputDecoration(
labelText: 'Digite seu texto aqui',
prefixIcon: Icon(Icons.person),
labelStyle: TextStyle(color: Colors.blue),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blue),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
),
)
Tratando Mudanças e Ações:
Você pode usar o callback onChanged
para executar código quando o conteúdo do TextField
é alterado. Além disso, você pode usar onSubmitted
para executar código quando o usuário confirma o texto (por exemplo, ao pressionar “Enter” no teclado).
TextField(
onChanged: (text) {
print('Texto alterado: $text');
},
onSubmitted: (text) {
print('Texto submetido: $text');
},
decoration: InputDecoration(
labelText: 'Digite seu texto aqui',
),
)
Limitando o Número de Linhas e Caracteres:
Você pode limitar o número de linhas e caracteres permitidos no TextField
usando as propriedades maxLines
e maxLength
.
TextField(
maxLines: 3, // Número máximo de linhas
maxLength: 50, // Número máximo de caracteres
decoration: InputDecoration(
labelText: 'Digite seu texto aqui',
),
)
Essas são apenas algumas das maneiras de personalizar e interagir com o widget TextField
no Flutter. Existem muitas outras propriedades e métodos disponíveis para atender a uma variedade de requisitos de entrada de texto em seu aplicativo.