Menu
CoddyTech

Rastreador de Hábitos: Seus hábitos

Parte da seção Projetos do Journey de Flutter da Coddy. Lição 28 de 36.

O último app é um rastreador de hábitos: um cartão para cada hábito, com uma marcação para cada dia da semana, uma sequência, um anel que se preenche conforme sua semana vai bem e modo escuro. É o tipo de app que as pessoas abrem todos os dias.

Os dados estão no projeto inicial. Um Habit tem um nome e sete bools, de segunda a domingo:

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

List.filled(7, false) cria uma lista de sete falses, uma semana em que nada foi feito.

Comece com um cartão para cada hábito. No fim, há muita coisa dentro de um cartão, então ele ganha seu próprio widget, HabitCard, que recebe um Habit. A tela permanece curta: um ListView com um HabitCard para cada hábito. Deixe espaço na parte inferior da lista (88 pixels) para um botão que ficará flutuando ali mais tarde.

challenge icon

Desafio

Fácil

Exiba os hábitos:

  • escreva um widget HabitCard que receba um required habit e mostre seu nome em titleMedium do tema
  • o cartão é um Card com margin: const EdgeInsets.only(top: 12), contendo 16 pixels de preenchimento ao redor de uma Column (em breve ela terá mais filhos)
  • substitua o Center por um ListView com preenchimento EdgeInsets.fromLTRB(16, 8, 16, 88) e um HabitCard para cada hábito

Experimente você mesmo

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'),
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Projetos

Pratique por conta própria: Compilador de Flutter online