![]() |
|
||||
Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: Flutter ::: Material Library - Biblioteca Material ::: TextField |
Aprenda a usar caixas de texto TextField em suas aplicações FlutterQuantidade de visualizações: 5833 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: ![]() |
|
|
Veja mais Dicas e truques de Flutter |
Dicas e truques de outras linguagens |
|
MySQL - Como usar joins no MySQL |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |







