Lista zadań: Dodawanie zadania

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

Lista zadań, do której nie możesz nic dodać, to plakat. Umieść pole i okrągły przycisk dodawania nad listą, w elemencie Row.

Pole otrzymuje TextEditingController, dzięki czemu przycisk dodawania może odczytać wpisany tekst. Dodawanie przebiega w dwóch krokach: umieść nowe Task na liście wewnątrz setState, aby lista została ponownie narysowana, a następnie wyczyść pole, by przygotować je na kolejne zadanie:

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

Lista współdzieli teraz ekran z polem. Element ListView wewnątrz Column wymaga otoczenia go elementem Expanded, aby zajął pozostałe miejsce, zamiast żądać całej dostępnej przestrzeni.

IconButton.filled to IconButton na wypełnionym okręgu w kolorze motywu — tak wygląda główna akcja w Material 3.

Wyzwanie

Średni

Dodawaj zadania z pola:

dodaj do stanu TextEditingController o nazwie _controller (i zwolnij go)
ustaw body jako Column: najpierw Row z odstępem 16 pikseli, zawierający Expanded z TextField oznaczonym etykietą New task oraz IconButton.filled z Icons.add, a następnie listę wewnątrz Expanded
dotknięcie przycisku dodaje wpisane zadanie na końcu listy i opróżnia pole

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

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