To-do-Liste: Eine Aufgabe hinzufügen

Teil des Abschnitts Projekte der Flutter-Journey von Coddy. Lektion 2 von 36.

Eine To-do-Liste, zu der du nichts hinzufügen kannst, ist ein Poster. Platziere ein Eingabefeld und eine runde Schaltfläche zum Hinzufügen oberhalb der Liste in einer Row.

Das Eingabefeld erhält einen TextEditingController, damit die Schaltfläche zum Hinzufügen den eingegebenen Text auslesen kann. Das Hinzufügen besteht aus zwei Schritten: Füge innerhalb von setState eine neue Task zur Liste hinzu, damit die Liste erneut gezeichnet wird, und leere dann das Eingabefeld für den nächsten Eintrag:

void _addTask() {
  setState(() {
    _tasks.add(Task(_controller.text));
  });
  _controller.clear();
}

Die Liste teilt sich nun den Bildschirm mit dem Eingabefeld. Eine ListView innerhalb einer Column benötigt eine Expanded-Umhüllung, damit sie den verbleibenden Platz einnimmt, statt den gesamten Platz zu beanspruchen.

IconButton.filled ist eine IconButton auf einem ausgefüllten Kreis in der Theme-Farbe, wie eine Hauptaktion in Material 3 aussieht.

Aufgabe

Mittel

Füge Aufgaben über ein Eingabefeld hinzu:

Gib dem Zustand einen TextEditingController namens _controller (und gib ihn frei)
Gestalte den body als Column: zuerst eine Row mit 16 Pixel Padding, darin ein Expanded-TextField mit der Beschriftung New task und ein IconButton.filled mit Icons.add, danach die Liste in einem Expanded
Durch Tippen auf die Schaltfläche wird die eingegebene Aufgabe am Ende der Liste hinzugefügt und das Eingabefeld geleert

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

class Task {
  Task(this.title);

  final String title;
}

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}