Você está aqui: Flutter ::: Material Library - Biblioteca Material ::: TextField |
Como habilitar ou desabilitar um botão ao digitar em um widget TextField do FlutterQuantidade de visualizações: 3772 vezes |
Nesta dica eu mostro como podemos habilitar ou desabilitar um botão ElevatedButton dependendo do conteúdo de um TextField. Para isso nós vamos usar a propriedade onChanged da classe TextField para desabilitar o botão quando a caixa de texto estiver vazia e habilitá-lo em caso contrário. O truque aqui é passar um valor null para a propriedade onPressed do ElevatedButton. Só isso já basta para que o botão fique desabilitado. Veja o código completo para o exemplo: import 'package:flutter/material.dart'; // método principal do Dart, que inicia a aplicação void main() { runApp(MeuApp()); } class MeuApp extends StatelessWidget { // Este widget é a raiz da aplicação Flutter @override Widget build(BuildContext context) { return MaterialApp( title: 'Controle TextField', theme: ThemeData( primarySwatch: Colors.blue, ), home: TelaInicial(), ); } } // Vamos construir a view e retornar para a raiz da aplicação class TelaInicial extends StatefulWidget { TelaInicial({Key key}) : super(key: key); @override _TelaInicialState createState() => _TelaInicialState(); } class _TelaInicialState extends State<TelaInicial> { bool btnDesabilitado = true; // vamos desabilitar o botão @override Widget build(BuildContext context) { // vamos criar uma caixa de texto chamada nomeTxt final nomeTxt = TextField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: BorderRadius.circular(10.0)), hintText: 'Digite seu nome' ), // Vamos detectar a mudança de conteúdo do TextField onChanged: (String value) async { // setState() força a atualização da janela if(value.isEmpty) { // o campo de texto não está vazio setState(() { btnDesabilitado = true; // desabilita o botão }); } else{ setState(() { btnDesabilitado = false; // habilita o botão }); } } ); final btnNome = ElevatedButton( onPressed: btnDesabilitado ? null : (){}, child: Text('Clique Aqui'), ); return Scaffold( appBar: AppBar( title: Text("O Widget TextField"), ), body: Center( child: Container( child: Padding( padding: const EdgeInsets.all(20.0), child: Column( children: <Widget>[ // a caixa de texto TextField vai aqui nomeTxt, // o botão vai aqui btnNome, ], ), ), ), ), ); } } |
![]() |
Veja mais Dicas e truques de Flutter |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |