習慣トラッカー：1週間

CoddyのFlutterジャーニー「プロジェクト」セクションの一部。レッスン 29/36。

各名前の下には1週間分が表示されます。月曜日から日曜日までの7つの小さな円で、実行した日の円が塗りつぶされます。それぞれの円は、ラベルと完了したかどうかを持つ、DayCircleという独立した小さなウィジェットです。

円は、固定サイズのContainerと、そのshapeがBoxShape.circleであるBoxDecorationで構成されます。色はテーマから取得するため、アプリの緑色に合い、後でダークモードにすると自動的に変わります。

final colors = Theme.of(context).colorScheme;
...
color: done ? colors.primary : colors.surfaceContainerHighest,

色付き背景上のテキストには、カラースキーム内で対応する色があります。primary上ではonPrimary、グレーの上ではonSurfaceVariantを使います。これらを組み合わせれば、テキストは常に読みやすくなります。

7つの円はMainAxisAlignment.spaceBetweenを指定したRowで、カード全体に均等に配置されます。カウントするforで作成します。dayNames[i]がラベルで、habit.days[i]が完了したかどうかを表します。

チャレンジ

中級

週を表示します：

requiredのlabelとdoneを持つDayCircleウィジェットを作成します。40×40の円を、完了時はprimary、未完了時はsurfaceContainerHighestで表示し、ラベルを中央に太字のサイズ11で配置します。色はonPrimaryまたはonSurfaceVariantを使います。
HabitCardで、名前の下に12ピクセルの余白を空けて、7つのDayCircleをspaceBetweenで均等に配置したRowを追加します。

自分で試してみよう

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: ListView(
        padding: const EdgeInsets.fromLTRB(16, 8, 16, 88),
        children: [
          for (Habit habit in _habits) HabitCard(habit: habit),
        ],
      ),
    );
  }
}

class HabitCard extends StatelessWidget {
  const HabitCard({super.key, required this.habit});

  final Habit habit;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Card(
      margin: const EdgeInsets.only(top: 12),
      clipBehavior: Clip.antiAlias,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(habit.name, style: textTheme.titleMedium),
          ],
        ),
      ),
    );
  }
}