Pelacak Kebiasaan: Kebiasaanmu

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

Aplikasi terakhir adalah pelacak kebiasaan: satu kartu untuk setiap kebiasaan dengan tanda centang untuk tiap hari dalam seminggu, rentetan hari, cincin yang terisi seiring berjalannya minggu, dan mode gelap. Aplikasi seperti ini biasanya dibuka orang setiap hari.

Datanya sudah ada di starter. Sebuah Habit memiliki nama dan tujuh bool, dari Senin sampai Minggu:

Habit('Drink water', [true, true, true, false, true, false, false]),
Habit('Stretch', List.filled(7, false)),

List.filled(7, false) membuat list yang berisi tujuh false, yaitu seminggu tanpa melakukan apa pun.

Mulailah dengan satu kartu untuk setiap kebiasaan. Pada akhirnya, sebuah kartu akan memuat banyak hal, jadi kartu itu memiliki widget sendiri, HabitCard, yang menerima sebuah Habit. Layar tetap ringkas: sebuah ListView dengan satu HabitCard untuk setiap kebiasaan. Sisakan ruang di bagian bawah list (88 piksel) untuk tombol yang nantinya mengambang di sana.

Tantangan

Mudah

Tampilkan kebiasaan:

tulis widget HabitCard yang menerima required habit dan menampilkan namanya dengan titleMedium dari theme
card berupa Card dengan margin: const EdgeInsets.only(top: 12), yang berisi Column dengan padding 16 piksel di sekelilingnya (sebentar lagi akan ada lebih banyak child)
ganti Center dengan ListView yang memiliki padding EdgeInsets.fromLTRB(16, 8, 16, 88) dan satu HabitCard untuk setiap kebiasaan

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: const Center(
        child: Text('Your habits go here'),
      ),
    );
  }
}