Suivi des habitudes : Vos habitudes

Fait partie de la section Projets du Journey Flutter de Coddy. Leçon 28 sur 36.

La dernière application est un suivi des habitudes : une carte par habitude avec une coche pour chaque jour de la semaine, une série, un anneau qui se remplit au fil des bons jours de votre semaine et un mode sombre. C’est le genre d’application que l’on ouvre tous les jours.

Les données se trouvent dans le projet de départ. Un Habit possède un nom et sept bools, du lundi au dimanche :

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

List.filled(7, false) crée une liste de sept false, soit une semaine où rien n’a été fait.

Commencez par créer une carte pour chaque habitude. À la fin, une carte contient beaucoup d’éléments : elle aura donc son propre widget, HabitCard, qui prend un Habit. L’écran reste concis : une ListView avec un HabitCard pour chaque habitude. Laissez un espace en bas de la liste (88 pixels) pour un bouton qui y flottera plus tard.

Défi

Facile

Affiche les habitudes :

écris un widget HabitCard qui prend un required habit et affiche son nom avec le titleMedium du thème
la carte est un Card avec margin: const EdgeInsets.only(top: 12), contenant une marge intérieure de 16 pixels autour d’un Column (il recevra bientôt d’autres enfants)
remplace le Center par un ListView avec la marge intérieure EdgeInsets.fromLTRB(16, 8, 16, 88) et un HabitCard pour chaque habitude

Essayez vous-même

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