Seu primeiro campo de texto

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 22 de 34.

Um TextField é uma caixa na qual as pessoas podem digitar. Toque nela na prévia e digite usando o teclado.

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
)

decoration: define a aparência do campo. labelText dá um nome ao campo: ele fica dentro da caixa vazia e sobe até a borda quando você começa a digitar, para que o nome esteja sempre visível. OutlineInputBorder() desenha uma borda ao redor de toda a caixa; sem ele, há apenas uma linha abaixo do texto.

Também existe hintText, um exemplo em cinza como you@example.com, mas ele desaparece assim que você digita. Use um rótulo para dar nome a um campo e uma dica apenas como complemento.

Um campo se estende por toda a largura disponível. Aqui, a Column fica dentro de um Padding, que a mantém afastada das bordas da tela.

Desafio

Fácil

Abaixo do título, após um SizedBox de 16, adicione um TextField rotulado como Email, com uma borda em todos os lados.

Experimente você mesmo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Create your account', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}