Трекер привычек: Ваши привычки
Часть раздела Проекты путешествия по Flutter на Coddy. Урок 28 из 36.
Последнее приложение — это трекер привычек: карточка для каждой привычки с отметкой за каждый день недели, серией дней подряд, кольцом, которое заполняется, если неделя проходит успешно, и тёмным режимом. Это приложение из тех, которые люди открывают каждый день.
Данные уже есть в стартовом проекте. У Habit есть имя и семь значений bool, с понедельника по воскресенье:
Habit('Drink water', [true, true, true, false, true, false, false]),
Habit('Stretch', List.filled(7, false)),List.filled(7, false) создаёт список из семи значений false — неделю, когда ничего не сделано.
Начни с одной карточки для каждой привычки. К концу в карточке будет много всего, поэтому для неё создаётся отдельный виджет — HabitCard, который принимает Habit. Экран остаётся коротким: ListView с одним HabitCard для каждой привычки. Оставь внизу списка место (88 пикселей) для кнопки, которая позже будет там плавать.
Задание
ЛегкоОтобрази привычки:
- напиши виджет
HabitCard, который принимает обязательныйhabitи отображает его название стилемtitleMediumиз темы - карточка — это
Cardсmargin: const EdgeInsets.only(top: 12), содержащаяColumnс внутренними отступами 16 пикселей (скоро в нём появятся другие дочерние элементы) - замени
CenterнаListViewс отступамиEdgeInsets.fromLTRB(16, 8, 16, 88)и добавьHabitCardдля каждой привычки
Попробуйте сами
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'),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Проекты
1Проект: список дел
Список дел: список задачСписок дел: добавление задачи4Проект: Трекер привычек
Трекер привычек: Ваши привычкиТрекер привычек: НеделяПотренируйтесь самостоятельно: Онлайн-компилятор Flutter