Você está aqui: Flutter ::: Material Library - Biblioteca Material ::: TextField |
Como usar a propriedade onChanged da classe TextField do Flutter para detectar mudança em seu conteúdo e exibí-lo como título da janelaQuantidade de visualizações: 1775 vezes |
A propriedade onChanged da classe TextField nos permite detectar quando o conteúdo da caixa de texto sofre alterações (quando o usuário digita mais conteúdo ou deleta o conteúdo já existente. Nesta dica eu mostro como tirar proveito dessa propriedade para atualizar o título da AppBar com o mesmo texto da caixa de texto à medida que o usuário digita. ---------------------------------------------------------------------- Precisa de ajuda? Chama no WhatsApp +55 (62) 98553-6711 (Osmar) Este código foi útil? Paga um cafezinho pra mim :-( PIX: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- 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> { String tituloJanela = "Título da Janela"; @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 setState(() { tituloJanela = value; }); } ); return Scaffold( appBar: AppBar( title: Text(tituloJanela), ), body: Center( child: Container( child: Padding( padding: const EdgeInsets.all(20.0), child: Column( children: <Widget>[ // a caixa de texto TextField vai aqui nomeTxt, ], ), ), ), ), ); } } |
![]() |
Veja mais Dicas e truques de Flutter |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |