Suivi des habitudes : La semaine

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

Sous chaque nom vient la semaine : sept petits cercles, du lundi au dimanche, remplis les jours où tu as effectué l’habitude. Chaque cercle est un petit widget à part entière, DayCircle, avec une étiquette et l’indication qu’il est terminé ou non.

Un cercle est un Container de taille fixe et doté d’une BoxDecoration dont la shape est BoxShape.circle. Sa couleur provient du thème, ce qui lui permet de reprendre le vert de l’application et, plus tard, de changer automatiquement en mode sombre :

final colors = Theme.of(context).colorScheme;
...
color: done ? colors.primary : colors.surfaceContainerHighest,

Le texte sur un fond coloré a une couleur correspondante dans le jeu de couleurs : onPrimary sur primary, onSurfaceVariant sur le gris. Associe-les et le texte sera toujours lisible.

Les sept cercles forment une Row avec MainAxisAlignment.spaceBetween, afin qu’ils se répartissent sur toute la carte. Crée-les avec une boucle for de comptage : dayNames[i] est l’étiquette et habit.days[i] indique si l’habitude est terminée.

Défi

Moyen

Affiche la semaine :

écris un widget DayCircle avec label et done obligatoires : un cercle de 40 sur 40 en primary lorsque la journée est terminée et en surfaceContainerHighest sinon, avec le libellé centré en gras, taille 11, en onPrimary ou onSurfaceVariant
dans HabitCard, sous le nom et un espacement de 12 pixels, ajoute une Row répartie avec spaceBetween contenant sept DayCircle

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: ListView(
        padding: const EdgeInsets.fromLTRB(16, 8, 16, 88),
        children: [
          for (Habit habit in _habits) HabitCard(habit: habit),
        ],
      ),
    );
  }
}

class HabitCard extends StatelessWidget {
  const HabitCard({super.key, required this.habit});

  final Habit habit;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Card(
      margin: const EdgeInsets.only(top: 12),
      clipBehavior: Clip.antiAlias,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(habit.name, style: textTheme.titleMedium),
          ],
        ),
      ),
    );
  }
}