Gewohnheitstracker: Deine Gewohnheiten

Teil des Abschnitts Projekte der Flutter-Journey von Coddy. Lektion 28 von 36.

Die letzte App ist ein Gewohnheitstracker: eine Karte pro Gewohnheit mit einem Häkchen für jeden Wochentag, einer Serie, einem Ring, der sich füllt, wenn deine Woche gut läuft, und einem dunklen Modus. Es ist die Art von App, die man jeden Tag öffnet.

Die Daten sind im Starterprojekt enthalten. Ein Habit hat einen Namen und sieben bools, von Montag bis Sonntag:

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

List.filled(7, false) erstellt eine Liste mit sieben falses – eine Woche, in der nichts erledigt wurde.

Beginne mit einer Karte pro Gewohnheit. Bis zum Ende enthält eine Karte eine ganze Menge, also bekommt sie ihr eigenes Widget, HabitCard, das ein Habit entgegennimmt. Der Bildschirm bleibt kurz: eine ListView mit einem HabitCard pro Gewohnheit. Lass am unteren Ende der Liste Platz (88 Pixel) für eine Schaltfläche, die später dort schwebt.

Aufgabe

Einfach

Zeige die Gewohnheiten:

Schreibe ein HabitCard-Widget, das ein required habit entgegennimmt und seinen Namen im titleMedium des Themes anzeigt
Die Karte ist ein Card mit margin: const EdgeInsets.only(top: 12) und 16 Pixel Innenabstand um eine Column (sie bekommt bald weitere untergeordnete Elemente)
Ersetze das Center durch eine ListView mit dem Innenabstand EdgeInsets.fromLTRB(16, 8, 16, 88) und einer HabitCard für jede Gewohnheit

Probier es selbst

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