Reagire alla digitazione

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 23 di 34.

Un campo può comunicarti ogni volta che il suo testo cambia. Assegnagli onChanged:, una funzione che riceve tutto il testo così com’è in quel momento:

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

Digita Ada e questo stampa tre volte: A, Ad, Ada. (String value) è un parametro, come quelli in Funzioni con parametri: il campo chiama la tua funzione passandole il suo testo.

Per mostrare il testo in un altro punto dello schermo, conservalo nello State e modificalo con setState, allo stesso modo in cui un pulsante modifica un conteggio:

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

Sfida

Facile

Fai in modo che il saluto segua il campo: mentre digiti un nome, Hello, stranger! diventa Hello, Ada!. Memorizza il testo in _name usando onChanged.

Provalo tu

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