 |
|
|
|
Você está aqui: Flutter ::: Material Library - Biblioteca Material ::: TextField |
Aprenda a usar caixas de texto TextField em suas aplicações FlutterQuantidade de visualizações: 5383 vezes |
|
A classe TextField é parte do Material e serve para permitir ao usuário inserir texto em nossos aplicativos, seja por meio de um teclado externo ou na tela. Em geral usamos este widget para solicitar nomes de usuários, e-mails, nomes de cidades, etc. Veja a posição deste widget na hierarquia de classes do Flutter: Object -> DiagnosticableTree -> Widget -> StatefulWidget -> TextField Como podemos ver, o widget TextField é um StatefulWidget, ou seja, um controle com o qual o usuário pode interagir. Veja uma aplicação Flutter completa na qual criamos e exibimos uma caixa de texto TextField com cantos arredondados e um texto de dica (hintText) para informar ao usuário o que deve ser digitado no campo. Note também o uso dos widgets Center, Container, Padding e Column para que você entenda como estes controles são usados para facilitar e controlar o layout do aplicativo. ----------------------------------------------------------------------
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> {
@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'
),
);
return Scaffold(
appBar: AppBar(
title: Text("Controle TextField"),
),
body: Center(
child: Container(
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Column(
children: <Widget>[
// a caixa de texto TextField vai aqui
nomeTxt,
],
),
),
),
),
);
}
}
Ao executar esta aplicação você verá o seguinte resultado:  |
 Link para compartilhar na Internet ou com seus amigos: |
Flutter ::: Material Library - Biblioteca Material ::: TextField |
Como habilitar ou desabilitar um botão ao digitar em um widget TextField do FlutterQuantidade de visualizações: 3424 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: ----------------------------------------------------------------------
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> {
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,
],
),
),
),
),
);
}
}
|
Flutter ::: Material Library - Biblioteca Material ::: TextField |
Como clicar em um botão, obter o texto digitado em um TextField do Flutter e exibí-lo em uma AlertDialogQuantidade de visualizações: 2511 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,
],
),
),
),
),
);
}
}
|
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: 1606 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. ----------------------------------------------------------------------
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 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 |
|
C++ - Como inicializar os valores dos elementos de um vetor C++ usando valores randômicos - Revisado C# - C# Windows Forms - Como verificar o estado da tecla Num Lock em suas aplicações C# Windows Forms |
Quem Somos |
Programador Freelancer - Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Civil pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 20 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
|
Programador Freelancer - Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..
|
Linguagens Mais Populares |
|
1º lugar: Java |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
