Tracker nawyków: Twoje nawyki

Część sekcji Projekty ścieżki Flutter w Coddy. Lekcja 28 z 36.

Ostatnia aplikacja to tracker nawyków: karta dla każdego nawyku z haczykiem na każdy dzień tygodnia, serią, pierścieniem, który wypełnia się w miarę upływu udanego tygodnia, i trybem ciemnym. To rodzaj aplikacji, którą ludzie otwierają każdego dnia.

Dane znajdują się w starterze. Habit ma nazwę i siedem wartości bool, od poniedziałku do niedzieli:

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

List.filled(7, false) tworzy listę siedmiu wartości false, czyli tydzień, w którym nic nie zostało zrobione.

Zacznij od jednej karty dla każdego nawyku. Do końca w karcie znajdzie się wiele elementów, dlatego otrzyma własny widżet, HabitCard, który przyjmuje obiekt Habit. Ekran pozostaje krótki: ListView z jednym HabitCard dla każdego nawyku. Zostaw na dole listy miejsce (88 pikseli) na przycisk, który później będzie tam pływać.

Wyzwanie

Łatwy

Wyświetl nawyki:

napisz widget HabitCard, który przyjmuje wymagany habit i wyświetla jego nazwę w stylu motywu titleMedium
karta to Card z marginesem margin: const EdgeInsets.only(top: 12), zawierająca 16 pikseli odstępu wokół Column (wkrótce pojawi się w niej więcej elementów)
zastąp Center elementem ListView z odstępem EdgeInsets.fromLTRB(16, 8, 16, 88) i elementem HabitCard dla każdego nawyku

Spróbuj swoich sił

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