Tu primer campo de texto

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 22 de 34.

Un TextField es un cuadro en el que se puede escribir. Tócalo en la vista previa y escribe con el teclado.

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

decoration: establece el aspecto del campo. labelText nombra el campo: aparece dentro del cuadro vacío y sube hasta el borde cuando empiezas a escribir, así que el nombre siempre está visible. OutlineInputBorder() dibuja un cuadro alrededor; sin él, solo hay una línea debajo del texto.

También está hintText, un ejemplo gris como you@example.com, pero desaparece en cuanto empiezas a escribir. Usa una etiqueta para nombrar un campo y una sugerencia solo como complemento.

Un campo se extiende a lo largo del ancho que se le asigna. Aquí, el Column está dentro de un Padding, que lo mantiene alejado de los bordes de la pantalla.

Desafío

Fácil

Debajo del título, después de un SizedBox de 16, agrega un TextField etiquetado como Email, con un borde alrededor.

Pruébalo tú mismo

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)),
          ],
        ),
      ),
    );
  }
}