Reaccionar al escribir

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

Un campo puede avisarte cada vez que cambia su texto. Asígnale onChanged:, una función que obtiene todo el texto tal como está ahora:

TextField(
  onChanged: (String value) {
    print(value);
  },
)

Escribe Ada y esto se imprime tres veces: A, Ad, Ada. (String value) es un parámetro, como los de Funciones con parámetros: el campo llama a tu función con su texto.

Para mostrar el texto en otro lugar de la pantalla, guárdalo en el estado y cámbialo con setState, de la misma manera que un botón cambia un contador:

onChanged: (String value) {
  setState(() {
    _name = value;
  });
},

Desafío

Fácil

Haz que el saludo siga el campo: al escribir un nombre, Hello, stranger! se convierte en Hello, Ada!. Guarda el texto en _name desde onChanged.

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 StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _name = 'stranger';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Greeter')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Your name',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            Text('Hello, $_name!', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}