Leggere un campo con un Controller

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

onChanged rileva ogni lettera. Spesso vuoi il testo solo quando premi un pulsante, come Aggiungi o Invia. Per farlo, assegna al campo un controller:

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

Il controller si trova nello State, accanto alle altre variabili. È final perché è sempre lo stesso controller; cambia solo il testo al suo interno. _controller.text è ciò che il campo contiene in questo momento, mentre _controller.clear() lo svuota.

void _send() {
  print(_controller.text);
  _controller.clear();
}

Un controller va eliminato quando viene eliminata la schermata. A questo serve dispose: Flutter lo chiama quando lo State viene rimosso.

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

Sfida

Medio

Aggiungi uno final TextEditingController _controller allo State e passalo al campo con controller:.
Fai in modo che _add mostri il testo del campo come Last added: Buy milk, quindi svuoti il campo.
Aggiungi il metodo dispose spiegato nella teoria.

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 _last = 'nothing';

  void _add() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tasks')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'New task',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 12),
            ElevatedButton(onPressed: _add, child: const Text('Add')),
            const SizedBox(height: 24),
            Text('Last added: $_last', style: const TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}