Alışkanlık Takipçisi: Alışkanlık Ekle

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

Herkes farklı alışkanlıkları takip eder, bu yüzden uygulamanın bir alışkanlık ekleme yolu olması gerekir. Köşedeki yuvarlak FloatingActionButton, adını soran bir iletişim kutusu açar.

showDialog, iletişim kutusunun döndürdüğü değerle bir Future verir. Burada iletişim kutusu Ekle için true, İptal için false döndürür ve alan, onChanged ile yazdıklarını bir değişkene yazar:

String name = '';
final added = await showDialog<bool>(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('New habit'),
    content: TextField(onChanged: (value) => name = value, ...),
    actions: [...],
  ),
);
if (added != true || name.trim().isEmpty) return;

added, bool? türündedir: iletişim kutusunun dışına dokunmak, onu null değeriyle kapatır. added != true hem İptal durumunu hem de bu durumu birlikte kapsar.

Yeni bir alışkanlık yeni bir haftayla başlar: List.filled(7, false). const [false, ...] değil: const bir liste hiçbir zaman değiştirilemez, bu nedenle ilk işaretleme uygulamanın durmasına neden olur.

Görev

Zor

Alışkanlık ekleyin:

Scaffold öğesine, Icons.add simgesini kullanan ve _addHabit işlevini çağıran bir FloatingActionButton ekleyin
Future<void> _addHabit() async yazın: başlığı New habit olan bir AlertDialog; içinde autofocus: true özelliğine sahip, etiketi Habit name olan bir TextField, bir Cancel TextButton ve bir Add FilledButton bulunsun
Ad ekledikten sonra, ad boş değilse bu adın başındaki ve sonundaki boşlukları temizleyip boş bir haftayla bir alışkanlık ekleyin

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;

  int get done => days.where((day) => day).length;

  int get streak {
    int best = 0;
    int run = 0;
    for (bool day in days) {
      if (day) {
        run++;
        if (run > best) best = run;
      } else {
        run = 0;
      }
    }
    return best;
  }
}

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

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

  @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,
              onToggle: (day) => _toggle(habit, day),
            ),
        ],
      ),
    );
  }
}

class HabitCard extends StatelessWidget {
  const HabitCard({super.key, required this.habit, required this.onToggle});

  final Habit habit;
  final void Function(int day) onToggle;

  @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: [
            Row(
              children: [
                Expanded(child: Text(habit.name, style: textTheme.titleMedium)),
                Text('${habit.done} of 7 days', style: textTheme.bodySmall),
              ],
            ),
            const SizedBox(height: 12),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                for (int i = 0; i < 7; i++)
                  DayCircle(
                    label: dayNames[i],
                    done: habit.days[i],
                    onTap: () => onToggle(i),
                  ),
              ],
            ),
            const SizedBox(height: 12),
            Row(
              children: [
                Icon(
                  Icons.local_fire_department,
                  size: 20,
                  color: habit.streak > 0 ? Colors.orange : Theme.of(context).colorScheme.outline,
                ),
                const SizedBox(width: 4),
                Text(habit.streak == 0 ? 'No streak yet' : '${habit.streak} day streak'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  final String label;
  final bool done;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return GestureDetector(
      onTap: onTap,
      child: 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,
          ),
        ),
      ),
    );
  }
}