Rastreador de hábitos: Tus hábitos

Parte de la sección Proyectos del Journey de Flutter de Coddy. Lección 28 de 36.

La última app es un seguimiento de hábitos: una tarjeta por hábito con una marca para cada día de la semana, una racha, un anillo que se va llenando cuando tu semana va bien y modo oscuro. Es el tipo de app que la gente abre todos los días.

Los datos están en el proyecto inicial. Un Habit tiene un nombre y siete valores bool, de lunes a domingo:

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

List.filled(7, false) crea una lista de siete valores false, una semana en la que no se ha hecho nada.

Empieza con una tarjeta por hábito. Al final, una tarjeta contiene muchas cosas, así que tendrá su propio widget, HabitCard, que recibe un Habit. La pantalla se mantiene breve: un ListView con un HabitCard por hábito. Deja espacio al final de la lista (88 píxeles) para un botón que más adelante flotará allí.

Desafío

Fácil

Muestra los hábitos:

escribe un widget HabitCard que reciba un habit required y muestre su nombre con el titleMedium del tema
la tarjeta es un Card con margin: const EdgeInsets.only(top: 12), que contiene un Column con 16 píxeles de relleno alrededor (pronto tendrá más elementos secundarios)
reemplaza el Center por un ListView con el relleno EdgeInsets.fromLTRB(16, 8, 16, 88) y un HabitCard para cada hábito

Pruébalo tú mismo

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