Alışkanlık Takipçisi: Bir Günü İşaretle

Coddy'nin Flutter Journey'sinin Projeler bölümünün bir parçası. Ders 30 / 36.

Günü işaretlemek için bir daireye dokun, işareti kaldırmak için daireye tekrar dokun. Alışkanlıklar ekranın durumunda bulunur, ancak daire, HabitCard bileşeninin derinliklerinde çizilir. Dokunma işleminin verilerin bulunduğu yere kadar yukarı taşınması gerekir.

Bu, geri çağırmalarla durumu yukarı taşımaktır. Değişikliğin sahibi ekrandır:

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

Her karta bir işlev verir: onToggle: (day) => _toggle(habit, day). Kartın bu işlev için kullandığı tür, günün numarasını alan bir işlev olan void Function(int day) türüdür. Her daireye yalın bir VoidCallback verilir: onTap: () => onToggle(i); daire, bu işlevi çağıran bir GestureDetector içine alınmış Container kullanır.

!habit.days[day], bir bool değerini tersine çevirir: true, false olur ve tekrar eski hâline döner; böylece tek bir işlev hem işaretler hem de işareti kaldırır.

Görev

Zor

Günleri işaretle:

ekranın durumuna _toggle yöntemini ekle
HabitCard öğesine void Function(int day) türünde required bir onToggle ver ve (day) => _toggle(habit, day) ifadesini geçir
DayCircle öğesine required bir VoidCallback onTap ver, Container öğesini GestureDetector ile sar ve () => onToggle(i) ifadesini geçir

Kendin dene

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