Pelacak Kebiasaan: Pekan Ini

Termasuk bagian Proyek dalam perjalanan Flutter di Coddy. Pelajaran 29 dari 36.

Di bawah setiap nama ada satu minggu: tujuh lingkaran kecil, Sen sampai Min, yang diisi pada hari-hari kamu melakukannya. Setiap lingkaran adalah widget kecil tersendiri, DayCircle, dengan label dan status apakah sudah selesai.

Lingkaran adalah Container dengan ukuran tetap dan BoxDecoration yang shape-nya adalah BoxShape.circle. Warnanya berasal dari tema, sehingga cocok dengan warna hijau aplikasi, dan nanti warnanya berubah sendiri dalam mode gelap:

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

Teks di atas latar berwarna memiliki warna yang sesuai dalam skema: onPrimary di atas primary, dan onSurfaceVariant di atas warna abu-abu. Pasangkan keduanya agar teks selalu mudah dibaca.

Tujuh lingkaran itu adalah sebuah Row dengan MainAxisAlignment.spaceBetween, sehingga tersebar di seluruh kartu. Buat lingkaran tersebut dengan for yang menghitung: dayNames[i] adalah labelnya, sedangkan habit.days[i] menunjukkan apakah sudah selesai.

Tantangan

Sedang

Tampilkan minggu ini:

tulis widget DayCircle dengan label dan done yang required: lingkaran berukuran 40 kali 40 dengan warna primary jika sudah selesai dan surfaceContainerHighest jika belum, dengan label di tengah dalam huruf tebal berukuran 11, berwarna onPrimary atau onSurfaceVariant
di HabitCard, di bawah nama dan jarak 12 piksel, tambahkan Row yang merentangkan tujuh DayCircle dengan spaceBetween

Coba sendiri

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