Ofereço ajuda em Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD
+55 (062) 98553-6711
Ofereço ajuda em PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO
+55 (062) 98243-1195

Você está aqui: Flutter ::: Material Library - Biblioteca Material ::: TextField

Aprenda a usar caixas de texto TextField em suas aplicações Flutter

Quantidade de visualizações: 5679 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.

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'


Ao executar esta aplicação você verá o seguinte resultado:



Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de Flutter

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 29 usuários muito felizes estudando em nosso site.