Lista zadań: Lista zadań

Część sekcji Projekty ścieżki Flutter w Coddy. Lekcja 1 z 36.

Ta sekcja obejmuje cztery aplikacje, budowane funkcja po funkcji. Znasz już każdy element; teraz połączysz je tak, jak tworzy się prawdziwe aplikacje.

Pierwsza aplikacja to lista zadań. Po ukończeniu tego rozdziału będziesz umieć dodawać zadania, oznaczać je jako wykonane, usuwać je przesunięciem, cofać usunięcie i filtrować wyświetlane elementy.

Każda aplikacja zaczyna się od danych. Na razie zadanie to tytuł, więc przechowuje je niewielka klasa, a ekran trzyma listę zadań w swoim State:

class Task {
  Task(this.title);

  final String title;
}

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

ListView.builder zamienia tę listę w wiersze na ekranie. Wywołuje itemBuilder raz dla każdego indeksu aż do itemCount, a każde wywołanie zwraca jeden element ListTile.

Wyzwanie

Łatwy

Wyświetl zadania:

napisz klasę Task z polem final String title i konstruktorem Task(this.title)
w klasie _TodoScreenState utwórz listę _tasks zawierającą trzy zadania: Buy milk, Walk the dog i Read a book
zastąp element Center w body: elementem ListView.builder, który wyświetla tytuł każdego zadania w elemencie ListTile

Spróbuj swoich sił

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

// Napisz tutaj klasę Task.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Utwórz tutaj listę zadań.

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