To-do-Liste: Die Aufgabenliste

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

Dieser Abschnitt besteht aus vier Apps, die Feature für Feature erstellt werden. Du kennst bereits jedes einzelne Teil; jetzt setzt du sie so zusammen, wie echte Apps entwickelt werden.

Die erste App ist eine To-do-Liste. Am Ende dieses Kapitels kannst du Aufgaben hinzufügen, als erledigt markieren, wegwischen, ein Löschen rückgängig machen und filtern, was du siehst.

Jede App beginnt mit ihren Daten. Eine Aufgabe ist vorerst ein Titel, daher enthält eine kleine Klasse diesen, und der Bildschirm verwaltet eine Aufgabenliste in ihrem State:

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

Ein ListView.builder wandelt diese Liste in Zeilen auf dem Bildschirm um. Er ruft itemBuilder für jeden Index bis itemCount einmal auf, und jeder Aufruf gibt ein ListTile zurück.

Aufgabe

Einfach

Zeige die Aufgaben:

Schreibe eine Task-Klasse mit einem final String title und einem Konstruktor Task(this.title).
Erstelle in _TodoScreenState eine Liste _tasks mit drei Aufgaben: Buy milk, Walk the dog und Read a book.
Ersetze das Center in body: durch eine ListView.builder, die den Titel jeder Aufgabe in einem ListTile anzeigt.

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

// Schreibe hier die Klasse Task.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Erstelle hier die Liste der Aufgaben.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}