Lista delle cose da fare: l’elenco delle attività

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

Questa sezione comprende quattro app, realizzate una funzionalità alla volta. Conosci già ogni elemento; ora li metti insieme nel modo in cui si realizzano le app vere.

La prima app è una lista di cose da fare. Alla fine di questo capitolo puoi aggiungere attività, contrassegnarle come completate, eliminarle con uno scorrimento, annullare un'eliminazione e filtrare ciò che visualizzi.

Ogni app parte dai propri dati. Per ora un'attività è un titolo, quindi una piccola classe lo contiene e la schermata conserva un elenco di attività nel suo State:

class Task {
  Task(this.title);

  final String title;
}

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

Un ListView.builder trasforma quell'elenco in righe sullo schermo. Chiama itemBuilder una volta per ogni indice fino a itemCount e ogni chiamata restituisce un ListTile.

Sfida

Facile

Mostra le attività:

scrivi una classe Task con un final String title e un costruttore Task(this.title)
in _TodoScreenState, crea una lista _tasks di tre attività: Buy milk, Walk the dog e Read a book
sostituisci il Center in body: con un ListView.builder che mostra il titolo di ogni attività in un ListTile

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

// Scrivi qui la classe Task.

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

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

class _TodoScreenState extends State<TodoScreen> {
  // Crea qui la lista delle attività.

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