Ein Feld mit einem Controller auslesen

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 24 von 34.

onChanged erfasst jeden Buchstaben. Oft möchtest du den Text erst, wenn eine Schaltfläche gedrückt wird, etwa „Hinzufügen“ oder „Senden“. Dafür gibst du dem Feld einen Controller:

final TextEditingController _controller = TextEditingController();

TextField(controller: _controller)

Der Controller befindet sich im State neben deinen anderen Variablen. Er ist final, weil es immer derselbe Controller ist; nur der Text darin ändert sich. _controller.text ist der aktuelle Inhalt des Feldes, und _controller.clear() leert es.

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

Ein Controller sollte verworfen werden, wenn sein Bildschirm verworfen wird. Dafür gibt es dispose: Flutter ruft es auf, wenn der State entfernt wird.

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

Aufgabe

Mittel

Füge dem State einen final TextEditingController _controller hinzu und übergib ihn dem Feld mit controller:.
Sorge dafür, dass _add den Text des Feldes als Last added: Buy milk anzeigt und das Feld anschließend leert.
Füge die Methode dispose aus der Theorie hinzu.

Probier es selbst

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