Lista delle cose da fare: aggiungere un’attività

Fa parte della sezione Progetti del percorso Flutter di Coddy. Lezione 2 di 36.

Una lista di cose da fare a cui non puoi aggiungere elementi è un poster. Inserisci un campo e un pulsante circolare per aggiungere elementi sopra la lista, in una Row.

Il campo riceve un TextEditingController, così il pulsante per aggiungere elementi può leggere ciò che è stato digitato. L'aggiunta avviene in due passaggi: inserisci una nuova Task nella lista all'interno di setState, così la lista viene disegnata di nuovo, poi svuota il campo per l'elemento successivo:

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

Ora la lista condivide lo schermo con il campo. Una ListView all'interno di una Column ha bisogno di essere racchiusa in un Expanded, così occupa lo spazio rimanente invece di richiederlo tutto.

IconButton.filled è un IconButton su un cerchio pieno del colore del tema, come si presenta un'azione principale in Material 3.

Sfida

Medio

Aggiungi attività da un campo:

assegna allo stato un TextEditingController chiamato _controller (e rilascialo)
rendi il body una Column: prima una Row con 16 pixel di padding, contenente un TextField Expanded etichettato New task e un IconButton.filled con Icons.add, poi l’elenco all’interno di un Expanded
toccando il pulsante, l’attività digitata viene aggiunta alla fine dell’elenco e il campo viene svuotato

Provalo tu

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