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.
Desafio
FácilExiba os hábitos:
- escreva um widget
HabitCardque receba umrequiredhabite mostre seu nome emtitleMediumdo tema - o cartão é um
Cardcommargin: const EdgeInsets.only(top: 12), contendo 16 pixels de preenchimento ao redor de umaColumn(em breve ela terá mais filhos) - substitua o
Centerpor umListViewcom preenchimentoEdgeInsets.fromLTRB(16, 8, 16, 88)e umHabitCardpara 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'),
),
);
}
}
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
1Projeto: Lista de tarefas
Lista de tarefas: A lista de tarefasLista de tarefas: Adicione uma tarefa4Projeto: Rastreador de Hábitos
Rastreador de Hábitos: Seus hábitosRastreador de Hábitos: A semanaPratique por conta própria: Compilador de Flutter online