Gewohnheitstracker: Einen Tag abhaken

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

Tippe auf einen Kreis, um den Tag abzuhaken, und tippe erneut darauf, um die Markierung zu entfernen. Die Gewohnheiten befinden sich im Zustand des Bildschirms, aber der Kreis wird tief in einer HabitCard gezeichnet. Der Tippen muss dorthin nach oben weitergegeben werden, wo sich die Daten befinden.

So wird der Zustand mithilfe von Callbacks nach oben gehoben. Der Bildschirm verwaltet die Änderung:

void _toggle(Habit habit, int day) {
  setState(() {
    habit.days[day] = !habit.days[day];
  });
}

Er übergibt jeder Karte eine Funktion: onToggle: (day) => _toggle(habit, day). Der Typ dafür in der Karte lautet void Function(int day), eine Funktion, die die Nummer des Tages entgegennimmt. Jeder Kreis erhält einen einfachen VoidCallback, onTap: () => onToggle(i), und umschließt sein Container mit einem GestureDetector, der ihn aufruft.

!habit.days[day] kehrt einen bool um: true wird zu false und umgekehrt, sodass eine Funktion sowohl abhaken als auch die Markierung entfernen kann.

Aufgabe

Schwer

Tage abhaken:

füge die Methode _toggle zum Zustand des Bildschirms hinzu
gib HabitCard ein erforderliches onToggle vom Typ void Function(int day) und übergib (day) => _toggle(habit, day)
gib DayCircle ein erforderliches VoidCallback onTap, umschließe dessen Container mit einem GestureDetector und übergib () => onToggle(i)

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),
            const SizedBox(height: 12),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                for (int i = 0; i < 7; i++) DayCircle(label: dayNames[i], done: habit.days[i]),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class DayCircle extends StatelessWidget {
  const DayCircle({super.key, required this.label, required this.done});

  final String label;
  final bool done;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return Container(
      width: 40,
      height: 40,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: done ? colors.primary : colors.surfaceContainerHighest,
      ),
      child: Text(
        label,
        style: TextStyle(
          fontSize: 11,
          fontWeight: FontWeight.bold,
          color: done ? colors.onPrimary : colors.onSurfaceVariant,
        ),
      ),
    );
  }
}