습관 추적기: 나의 습관

Coddy Flutter 여정의 프로젝트 섹션에 포함된 레슨. 36개 중 28번째.

마지막 앱은 습관 추적기입니다. 습관마다 카드 하나가 있고, 요일별 체크 표시, 연속 기록, 한 주를 잘 보내면 채워지는 링, 다크 모드가 있습니다. 사람들이 매일 여는 종류의 앱입니다.

데이터는 시작 코드에 있습니다. Habit에는 이름과 월요일부터 일요일까지의 bool 값 7개가 있습니다.

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

List.filled(7, false)는 false 값 7개로 이루어진 목록을 만듭니다. 일주일 동안 아무것도 하지 않은 상태입니다.

습관마다 카드 하나씩 표시하는 것부터 시작하세요. 카드에는 나중에 많은 내용이 들어가므로, Habit을 받는 HabitCard라는 자체 위젯으로 만드세요. 화면은 짧게 유지하세요. 습관마다 HabitCard 하나씩 표시하는 ListView를 사용하세요. 나중에 그곳에 떠 있을 버튼을 위해 목록 아래쪽에 공간(88픽셀)을 남겨 두세요.

챌린지

쉬움

습관을 표시하세요:

required habit을 전달받고 테마의 titleMedium에 습관 이름을 표시하는 HabitCard 위젯을 작성하세요
카드는 Card이며, margin: const EdgeInsets.only(top: 12)을 적용하고 Column 주위에 16픽셀의 패딩을 둡니다(곧 자식 요소가 더 추가됩니다).
Center를 EdgeInsets.fromLTRB(16, 8, 16, 88) 패딩이 적용된 ListView로 바꾸고, 각 습관에 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'),
      ),
    );
  }
}