Tracker delle abitudini: le tue abitudini

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

L’ultima app è un tracker delle abitudini: una scheda per ogni abitudine, con una spunta per ogni giorno della settimana, una serie, un anello che si riempie man mano che la settimana procede bene e la modalità scura. È il tipo di app che si apre ogni giorno.

I dati sono nel progetto iniziale. Un Habit ha un nome e sette bool, dal lunedì alla domenica:

Habit('Drink water', [true, true, true, false, true, false, false]),
Habit('Stretch', List.filled(7, false)),

List.filled(7, false) crea una lista di sette false, una settimana in cui non è stato fatto nulla.

Inizia con una scheda per ogni abitudine. Alla fine, una scheda conterrà molte cose, quindi avrà il suo widget, HabitCard, che accetta un Habit. La schermata rimane breve: un ListView con un HabitCard per ogni abitudine. Lascia spazio in fondo all’elenco (88 pixel) per un pulsante che in seguito vi rimarrà sospeso.

Sfida

Facile

Mostra le abitudini:

scrivi un widget HabitCard che richiede un habit e ne mostra il nome usando titleMedium del tema
la scheda è un Card con margin: const EdgeInsets.only(top: 12), che contiene una Column con 16 pixel di spaziatura interna (presto avrà altri elementi figli)
sostituisci il Center con un ListView con spaziatura interna EdgeInsets.fromLTRB(16, 8, 16, 88) e un HabitCard per ogni abitudine

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.green),
      ),
      home: const HabitScreen(),
    );
  }
}

const List<String> dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

class Habit {
  Habit(this.name, this.days);

  final String name;
  final List<bool> days;
}

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

  @override
  State<HabitScreen> createState() => _HabitScreenState();
}

class _HabitScreenState extends State<HabitScreen> {
  final List<Habit> _habits = [
    Habit('Drink water', [true, true, true, false, true, false, false]),
    Habit('Read 10 pages', [true, false, true, true, false, false, false]),
    Habit('Stretch', List.filled(7, false)),
  ];

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