Habit Tracker: Your Habits

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

The last app is a habit tracker: a card per habit with a tick for each day of the week, a streak, a ring that fills up as your week goes well, and dark mode. It is the kind of app people open every day.

The data is in the starter. A Habit has a name and seven bools, Monday to Sunday:

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

List.filled(7, false) makes a list of seven falses, a week with nothing done.

Start with one card per habit. A card has a lot inside it by the end, so it gets its own widget, HabitCard, that takes a Habit. The screen stays short: a ListView with one HabitCard per habit. Leave room at the bottom of the list (88 pixels) for a button that floats there later.

Challenge

Easy

Show the habits:

write a HabitCard widget that takes a required habit and shows its name in the theme's titleMedium
the card is a Card with margin: const EdgeInsets.only(top: 12), holding 16 pixels of padding around a Column (it gets more children soon)
replace the Center with a ListView with padding EdgeInsets.fromLTRB(16, 8, 16, 88) and a HabitCard for each habit

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: const Center(
        child: Text('Your habits go here'),
      ),
    );
  }
}