Habit Tracker: The Week

Part of the Projects section of Coddy's Flutter journey. Lesson 29 of 36.

Under each name goes the week: seven small circles, Mon to Sun, filled in on the days you did it. Each circle is a small widget of its own, DayCircle, with a label and whether it is done.

A circle is a Container with a fixed size and a BoxDecoration whose shape is BoxShape.circle. Its color comes from the theme, so it matches the app's green, and in dark mode later it changes by itself:

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

Text on a colored background has a matching color in the scheme: onPrimary on primary, onSurfaceVariant on the grey. Pair them and the text is always readable.

The seven circles are a Row with MainAxisAlignment.spaceBetween, so they spread across the card. Build them with a counting for: dayNames[i] is the label and habit.days[i] whether it is done.

Challenge

Medium

Show the week:

write a DayCircle widget with a required label and done: a 40 by 40 circle in primary when done and surfaceContainerHighest when not, with the label centered in bold size 11, in onPrimary or onSurfaceVariant
in HabitCard, under the name and 12 pixels of space, add a Row spread with spaceBetween of seven DayCircles

Try it yourself

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