Theo dõi thói quen: Thói quen của bạn

Thuộc phần Dự án trong hành trình Flutter của Coddy. Bài học 28 trên 36.

Ứng dụng cuối cùng là một công cụ theo dõi thói quen: mỗi thói quen có một thẻ với ô đánh dấu cho từng ngày trong tuần, một streak, một vòng tròn đầy dần khi tuần của bạn diễn ra tốt đẹp và chế độ tối. Đây là kiểu ứng dụng mọi người mở mỗi ngày.

Dữ liệu có sẵn trong phần khởi đầu. Một Habit có tên và bảy giá trị bool, từ thứ Hai đến Chủ nhật:

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

List.filled(7, false) tạo một danh sách gồm bảy giá trị false, tức một tuần chưa hoàn thành việc gì.

Bắt đầu với một thẻ cho mỗi thói quen. Đến cuối cùng, mỗi thẻ sẽ chứa khá nhiều nội dung, nên hãy tạo widget riêng tên là HabitCard, nhận một Habit. Giữ màn hình gọn bằng một ListView với một HabitCard cho mỗi thói quen. Chừa khoảng trống ở cuối danh sách (88 pixel) cho một nút sẽ nổi ở đó sau này.

Thử thách

Dễ

Hiển thị các thói quen:

viết một widget HabitCard nhận habit bắt buộc và hiển thị tên của thói quen bằng titleMedium trong giao diện chủ đề
thẻ là một Card có margin: const EdgeInsets.only(top: 12), chứa một Column với phần đệm 16 pixel xung quanh (sắp tới widget này sẽ có thêm phần tử con)
thay Center bằng ListView có phần đệm EdgeInsets.fromLTRB(16, 8, 16, 88) và một HabitCard cho mỗi thói quen

Tự làm thử

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