Você está aqui: Flutter ::: Material Library - Biblioteca Material ::: TextField |
Como clicar em um botão, retornar o texto digitado em um TextField do Flutter e exibí-lo em uma AlertDialogQuantidade de visualizações: 2902 vezes |
|
Nesta dica mostrarei como clicar em um botão, obter o texto que o usuário digitou em um TextField e exibí-lo em uma caixa de mensagem AlertDialog. Para isso vamos tirar proveito da classe TextEditingController, que nos fornece um controller que pode ser associado a uma caixa de texto. Quando o usuário clicar no botão, nós chamamos o método setState() para atualizar uma variável com o texto do controller e em seguida exibimos uma mensagem AlertDialog com o texto digitado. Veja o exemplo completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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 nomeUsuario; // vai guarda o nome digitado no TextField
// controler para o TextField
TextEditingController nomeController = TextEditingController();
// método que nos permite obter o conteúdo digitado no TextField
void obterTexto() {
setState(() {
// transferimos para a variável nomeUsuario o conteúdo
// do texto do controller do TextField
nomeUsuario = nomeController.text;
});
// agora vamos mostrar o texto digitado em uma mensagem
// AlertDialog
showDialog<void>(context: context,
barrierDismissible: false, builder: (BuildContext context) {
return new AlertDialog(
title: new Text("Texto Digitado"),
content: new SingleChildScrollView(
child: new ListBody(
children: [
new Text("O texto digitado foi: $nomeUsuario"),
],
),
),
actions: [
new FlatButton(
child: new Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
// vamos criar uma caixa de texto chamada nomeTxt
final nomeTxt = TextField(
controller: nomeController,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)),
hintText: 'Digite seu nome'
),
);
final btnNome = ElevatedButton(
onPressed: obterTexto,
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 |







