Gewohnheitstracker: Die Woche

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

Unter jedem Namen steht die Woche: sieben kleine Kreise, von Mo bis So, die an den Tagen ausgefüllt sind, an denen du es getan hast. Jeder Kreis ist ein kleines eigenes Widget, DayCircle, mit einer Beschriftung und der Angabe, ob er erledigt ist.

Ein Kreis ist ein Container mit einer festen Größe und einer BoxDecoration, deren shape BoxShape.circle ist. Seine Farbe stammt aus dem Theme, sodass sie zum Grün der App passt, und im Dunkelmodus ändert sie sich später automatisch:

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

Text auf einem farbigen Hintergrund hat eine passende Farbe im Farbschema: onPrimary auf primary, onSurfaceVariant auf dem Grau. Kombiniere sie, und der Text ist immer lesbar.

Die sieben Kreise sind eine Row mit MainAxisAlignment.spaceBetween, sodass sie sich über die Karte verteilen. Erzeuge sie mit einer zählenden for-Schleife: dayNames[i] ist die Beschriftung und habit.days[i] gibt an, ob der Tag erledigt ist.

Aufgabe

Mittel

Zeige die Woche:

Schreibe ein DayCircle-Widget mit einem erforderlichen label und done: einen 40 mal 40 großen Kreis in primary, wenn erledigt, und in surfaceContainerHighest, wenn nicht, mit dem zentrierten Label in Fettschrift, Größe 11, in onPrimary oder onSurfaceVariant
Füge in HabitCard unter dem Namen und 12 Pixel Abstand eine mit spaceBetween verteilte Row aus sieben DayCircles hinzu

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