🌟Flutterで初めてのアプリ

要件の確認

今回作るアプリについて

日常のタスク管理に使えるTODOアプリを作成します。

TODOアプリとは、「やることリスト」を管理するアプリのことです。例えば：
「レポートを書く」
「買い物に行く」
「友達にメールを送る」
このような日々のタスクを登録して、完了したらチェックを付けることで、やるべきことを整理できます。

アプリでできること

作成するTODOアプリでは、以下のことができます：

📝 タスクの管理
タスクの一覧表示: 登録したタスクをリスト形式で確認
新しいタスクの追加: 新しい「やること」をアプリに登録
完了・未完了の切り替え: タスクが終わったらチェックマークを付ける
不要なタスクの削除: 必要なくなったタスクを削除
💡 使用例
朝の準備

「朝ご飯を食べる」→ 完了✅
「歯磨きをする」→ 完了✅
「大学の準備をする」→ 未完了⭕
このように、視覚的にやることが整理されるので、忘れ物や やり忘れを防ぐことができます。

アプリの画面構成

TODOアプリは、主に2つの画面で構成されます：

🏠 メイン画面（タスク一覧画面）
アプリを開いた時に最初に表示される画面です。

登録されているタスクの一覧が表示される
各タスクの完了・未完了を切り替えるボタン
不要になったタスクを削除するボタン
新しいタスクを追加するための「＋」ボタン
➕ タスク追加画面
新しいタスクを入力する画面です。

タスクの内容を入力するテキストボックス
「保存」ボタン（入力したタスクを登録）
「キャンセル」ボタン（入力を取り消してメイン画面に戻る）
この2つの画面を行き来することで、タスクの管理が行えます。

タスクの情報について

アプリで管理する各タスクは、以下の3つの情報を持ちます：

🆔 識別番号（ID）
コンピューターがタスクを区別するための番号です。 同じ内容のタスクが複数あっても、この番号で見分けることができます。 （ユーザーには表示されませんが、アプリの内部で重要な役割を果たします）

📝 タスクの内容（タイトル）
実際にやることの内容です。例：「レポートを書く」「買い物に行く」

✅ 完了状態
そのタスクが完了しているかどうかの情報です。

完了：✅（チェックマーク）
未完了：⭕（未チェック）
これらの情報を組み合わせることで、効率的なタスク管理が可能になります。

実装の概要

アプリのファイル構成について

アプリを作る際は、コードを整理整頓するために、役割ごとにファイルを分けて管理します。

📁 フォルダとファイルの構成
lib/ （アプリの核となるフォルダ）
├── main.dart （アプリの開始地点）
├── models/ （データの設計図フォルダ）
│ └── todo.dart （タスクの設計図）
├── screens/ （画面フォルダ）
│ ├── home_screen.dart （メイン画面）
│ └── add_todo_screen.dart （タスク追加画面）
├── widgets/ （再利用できる部品フォルダ）
│ ├── todo_list.dart （タスクリスト部品）
│ └── todo_card.dart （個別タスク部品）
└── services/ （データ管理フォルダ）
└── todo_service.dart （データの保存・読み込み）

🔍 各ファイルの役割

main.dart: アプリが最初に実行されるファイル（アプリの「入り口」）
screens/: ユーザーが実際に見る画面のファイル
models/: データの構造を定義するファイル（タスクが持つ情報の決まり）
widgets/: 画面の中で使い回せる部品のファイル
services/: データの保存や読み込みを担当するファイル

開発の進め方

アプリ開発は、家を建てるのと似ています。基礎から順番に作っていく必要があります。

🏗️ 段階的な開発手順

1. プロジェクトの新規作成

土地の整備（開発環境の準備）
基本的な設計図の準備
2. Todoパーツの実装

建材の準備（再利用できる部品の作成）
タスクを表示するための基本的な部品作り
3. データモデルの実装

設計図の詳細化（タスクの詳細な構造を決定）
データの保存方法の決定
4. Todoリスト画面の実装

1階部分の建設（メイン画面の作成）
タスク一覧を表示する画面
5. Todo追加画面の実装

2階部分の建設（追加画面の作成）
新しいタスクを入力する画面
6. 状態管理の実装

電気・水道工事（画面間の連携）
データの更新とリアルタイム反映
この順序で進めることで、確実にアプリを完成させることができます。

開発で大切なポイント

アプリ開発では、以下の3つのポイントが特に重要です：

🎨 画面の作り方（UI実装）
ユーザーが実際に見て操作する部分を作ります。

部品化: 同じ機能を何度も使い回せるように、部品として作成
画面構成: 各画面のレイアウトと見た目を設計
画面移動: ボタンを押した時の画面の切り替え
例: 「タスクを表示するカード」を1つ作れば、それを何個でも並べてリストにできます

🔄 データの管理（状態管理）
アプリが動的に変化する部分を管理します。

リアルタイム更新: タスクを追加したらすぐに画面に反映
情報の共有: 違う画面間でデータを共有
変更の検知: データが変わった時に画面を自動更新
例: 新しいタスクを追加したら、メイン画面のリストにも即座に表示される

💾 データの保存（データ永続化）
アプリを閉じても情報が残るようにします。

自動保存: タスクを追加・変更したら自動的に保存
復元: アプリを再起動した時に前回のデータを読み込み
例: アプリを閉じて再度開いても、前回作ったタスクがちゃんと残っている

開発環境準備とプロジェクト作成

前のステップで開発の全体像について理解していただけたでしょうか？

この章では、実際にアプリ開発を始めるための準備を行います。新しい作業場を整えて、TODOアプリの基礎となるファイルを作成し、コンピューター上でアプリが動作することを確認していきます。

🎯 この章のゴール
TODOアプリ専用の新しいフォルダとファイルを作成する
仮想のスマートフォン（エミュレーター）を起動する
基本的なアプリがスマートフォンで動くことを確認する
📋 作業手順

1. 新しいアプリのフォルダを作成

まず、今回のTODOアプリ専用のフォルダとファイルを作成します。 これは、新しいプロジェクトを始める時にノートと文房具を用意するようなものです。

いくつか作成方法があるので好きなもので作成してください。作成するフォルダの場所は任意です。

💻 1. コマンドの実行

Android StudioまたはVSCodeの コマンドプロンプト（またはターミナル） で以下を入力してください：

flutter create todo_app
cd todo_app

🔍 コマンドの説明
flutter create todo_app: 「todo_app」という名前の新しいアプリを作成
cd todo_app: 作成されたフォルダの中に移動

💻 2. VSCodeの場合、コマンドパレットから作成

Command＋Shift＋Pを押してコマンドパレットを開く
コマンドパレットから「Flutter: New Project」を選択
プロジェクト名を入力（ここでは「todo_app」とします）
プロジェクトを作成

💻 3. AndroidStudioの場合、メニューから作成

上部のヘッダーメニューから「File」→「New」→「New Flutter Project」を選択
プロジェクト名を入力（ここでは「todo_app」とします）
プロジェクトを作成
成功すると、「todo_app」というフォルダができ、その中にアプリ開発に必要なファイルが自動的に作られます。

2. 不要なコードを削除して空の画面を作る

新しく生成された Flutter プロジェクトは カウンターアプリのサンプルになっています。そのままでは Todo アプリとは関係のないボタンやロジックが含まれているため、最小構成へリセットしましょう。

エディターで lib/main.dart を開きます。
既存の CounterApp や MyHomePage など カウンター関連のウィジェットをすべて削除 し、次のコードに置き換えます。
lib/main.dart (最小構成)

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(
      title: 'Todo App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Todo App')),
        body: const Center(child: Text('ようこそ Todo App へ')),
      ),
    );
  }
}

これで アプリを起動しても空の画面とタイトルバーだけが表示される状態 になります。以降のステップで必要なウィジェットを少しずつ追加していきます。

3. 仮想スマートフォンの準備

最小構成になったアプリが動作することを確認しましょう。 実際のスマートフォンがなくても、コンピューター上で仮想的なスマートフォンを動かすことができます。 これをエミュレーターと呼びます。

📱 利用可能なエミュレーターの確認
まず、どのようなエミュレーターが使えるかを確認しましょう：

flutter emulators

このコマンドで、使用可能なエミュレーターの一覧が表示されます。

🚀 エミュレーターの起動
一覧から適切なエミュレーターを選んで起動します：

flutter emulators --launch <エミュレーター名>

例:

flutter emulators --launch Pixel_7_API_34

VSCodeやAndroid Studioの各メニューからエミュレーターを起動することも可能です。

また、アプリ実行時にエミュレーターが起動していない場合は、その過程でエミュレーターを起動することもできます。

上部のヘッダーメニューから「Run」→「Run Without Debugging」を選択
エミュレーターの選択
アプリが起動

4. エミュレーターの動作確認

エミュレーターが起動したら、以下の点を確認してください：

✅ 確認ポイント
画面表示: スマートフォンのような画面が表示されている
画面の向き: 縦向きで表示されている
操作性: マウスでタッチ操作ができる
🔧 エミュレーターの設定変更
エミュレーターの種類を変更したい場合は、Android StudioのAVD Managerから変更できます
画面サイズや性能なども調整可能です

5. アプリの実行テスト

エミュレーターが正常に動作していることを確認できたら、実際にアプリを実行してみましょう：

flutter run

⏱️ 実行時間について
初回実行時は、必要なファイルのダウンロードと準備のため、5〜10分程度かかる場合があります。 コーヒーでも飲みながら、気長にお待ちください☕️

6. 動作確認とテスト

アプリが無事に起動したら、以下を確認してみましょう：

📱 基本動作の確認
アプリの起動: アプリが正常に表示される
画面表示: 文字やボタンが読める大きさで表示される
アプリ起動後のイメージ
説明文
🛠️ トラブルシューティング
❌ よくある問題と解決方法
問題: エミュレーターが起動しない

解決策: Android Studioを再起動して、AVD Managerから手動でエミュレーターを起動
問題: アプリの実行が失敗する

解決策: flutter doctorコマンドをターミナルで実行し、開発環境に問題がないか確認
問題: 実行が非常に遅い

解決策: エミュレーターの設定でRAMとCPUの割り当てを増やす

pubspec.yaml の設定

Flutter プロジェクトでは pubspec.yaml ファイルがアプリの「設計図 & 仕入れリスト」の役割を担います。ここにアプリで利用するパッケージやアセット（画像やフォントなど）、バージョン情報を記述しておくことで、チーム全員が同じ環境でビルドできます。

🎯 この章のゴール

pubspec.yaml の基本構造を理解する
Todo アプリで必要となる依存パッケージを追加する
コマンドで依存関係をインストールし、エラーが発生しないことを確認する

パッケージとは？

Flutterにおける「パッケージ」とは、再利用可能なコードのひとまとまりを指します。Dart では pub.dev という公式サイトに公開されており、以下の要素を含むことができます。

Dart ソースコード（クラス、関数、ウィジェットなど）
ドキュメントやサンプルコード
pubspec.yaml にパッケージ名とバージョンを記述すると、flutter pub get コマンドで自動的にダウンロード・組み込みが行われ、プロジェクト内でインポートして利用できるようになります。

パッケージを活用する理由

Flutterに限らず、スマホアプリ開発では、UI コンポーネント、状態管理、データベース、認証など、あらゆる用途に対応した数千ものパッケージが公開されています。既存のパッケージを活用することで複雑な機能を一から実装する手間を省き、本来注力すべき開発に時間を割けます。

pubspec.yaml の中身

アプリのプロジェクトフォルダの直下にある pubspec.yaml を開きます。

まずは生成直後の pubspec.yaml をざっと眺めてみましょう。

pubspec.yaml (抜粋)

name: todo_app
# ... 省略 ...
environment:
  sdk: '>=3.2.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
#dev_dependencies や flutter 部分も続く

dependencies: の下にアプリが使用する外部パッケージを列挙していきます。

Todo アプリで追加する依存パッケージ

パッケージ	用途	備考
uuid	一意なIDを生成	データモデルで使用
shared_preferences	端末ローカルにデータを保存	ログイン情報や簡易設定の保存に便利
intl	日付フォーマット	DateFormat で日本語表記

それでは次のように pubspec.yaml へパッケージを追加してみましょう。 インデントの位置にはご注意してください。

pubspec.yaml (dependencies 追加後)

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

  # --- ここから追加分 ---
  uuid: ^4.5.1
  shared_preferences: ^2.5.3
  intl: ^0.20.2

🚨 バージョンは執筆時点（2025-06）での例です。実際には pub.dev で最新バージョンを確認してください。

パッケージをインストールする
ターミナルでプロジェクト直下に移動し、次のコマンドを実行しましょう。

flutter pub get

exit code 0 が返ってきてエラーが出なければ成功です。

よくあるエラーと対処法

エラー	原因	解決策
"Because X depends on Y >=1.0.0 which requires SDK version…"	Dart / Flutter SDK が古い	flutter upgrade でアップグレード
"ProcessException: No such file or directory"	flutter コマンドが通ってない	PATH を確認、ターミナルを再起動

Todoパーツの実装

前のステップで開発環境の準備とプロジェクト作成が完了しました。

この章では、実装の概要で説明した2番目のステップ「Todoパーツの実装」を行います。TODOアプリで繰り返し使用する基本的な部品（コンポーネント）を作成していきます。

🎯 この章のゴール

再利用可能な部品の概念を理解する
TODOデータの設計図を作成する
TODOを表示するためのカード部品を作成する
効率的な開発手法を身につける
完成コンポーネントのイメージ
説明文

🧩 「コンポーネント」ってなに？

アプリ開発における「コンポーネント」とは、何度も使い回せる部品のことです。

📦 日常生活での例

レゴブロックを思い浮かべてください：

基本ブロック: 同じ形の部品を何個も組み合わせて大きな作品を作る
再利用: 一度作った部品は、別の場所でも使い回せる
効率性: 毎回ゼロから作るより、既存の部品を活用する方が早い
アプリ開発でも同じです。「タスクを表示するカード」を1つ作れば、それを何個も並べてリストにできます。

🔄 パーツ化のメリット

作業効率: 一度作れば何度でも使える
統一性: 見た目やスタイルが統一される
保守性: 修正が必要な時は1箇所を変えるだけで全体に反映

📋 作業手順

1. TODOデータの設計図を作成

📁 フォルダとファイルを準備
まずはコードを配置するためのフォルダとファイルを作成します。最終的な構成イメージは以下のとおりです。

プロジェクト内のディレクトリ構成
lib/ アプリの核となるフォルダ
├── main.dart アプリの開始地点
├── models/ データの設計図を置くフォルダ
│ └── todo.dart タスクの設計図ファイル（この章で実装）

フォルダやファイルの作成は、VSCodeやAndroid Studioの各メニューから行えます。

CreateNew
これで todo.dart に Todo クラスを書ける準備が整いました。

🏗️ Todoクラスの作成

class Todo {
  final String title;        // タスクのタイトル（例：「レポートを書く」）
  final String detail;       // タスクの詳細（例：「心理学のレポート、2000字」）
  final DateTime dueDate;    // 期日（例：DateTime(2025, 4, 1)）
  final bool isCompleted;         // チェック済みかどうか（true: 完了, false: 未完了）
  
  // コンストラクタ（TODOを作成する時の決まり）
  Todo({
    required this.title,     // タイトルは必須
    required this.detail,    // 詳細も必須
    required this.dueDate,   // 期日も必須
    this.isCompleted = false,     // デフォルトは「未完了」
  });
}

🔍 コードの説明

class Todo: 「Todo」という新しいデータ型を定義
final String title: タイトル文字列（変更不可）
final String detail: 詳細文字列（変更不可）
final DateTime dueDate: 期日（DateTime型、変更不可）
final bool isCompleted: チェックボックスの状態（完了ならtrue）
required: 必ず指定する必要がある項目（isCompletedはデフォルトでfalseなので任意）
2. TODOカード部品の作成
次に、TODOデータを画面に表示するための「カード」部品を作成します。

完成コンポーネントのイメージ

説明文

📁 todo_card.dartファイルを準備

todo.dartファイルと同じように、widgetsフォルダにtodo_card.dartファイルを作成します。

プロジェクト内のディレクトリ構成
lib/ アプリの核となるフォルダ
├── main.dart アプリの開始地点
├── widgets/
│ └── todo_card.dart

これで todo_card.dart に TodoCard クラスを書ける準備が整いました。

🎴 TodoCardウィジェットの作成

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';    // 日付フォーマット用パッケージ

class TodoCard extends StatelessWidget {
  final Todo todo;                // 表示する Todo データ
  final VoidCallback? onToggle;   // 完了トグル用コールバック（任意）
  const TodoCard({
    super.key,
    required this.todo,
    this.onToggle,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.blue,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      elevation: 8,
      child: SizedBox(
        width: double.infinity,
        height: 150,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // ── 左端：チェックアイコン（タップでトグル）
            IconButton(
              iconSize: 32,
              icon: Icon(
                todo.isCompleted
                    ? Icons.check_circle   // チェック済み
                    : Icons.radio_button_unchecked, // 未チェック
                color: Colors.white,
              ),
              onPressed: onToggle,
            ),
            const SizedBox(width: 8),
            // ── テキスト群
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    todo.title,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    todo.detail,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 16,
                    ),
                  ),
                  Text(
                    DateFormat('M月d日(E)').format(todo.dueDate),
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 16,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

🔍 コードの説明

StatelessWidget — 状態を持たない再利用可能なウィジェット。
Card — 角丸と影を備えたカード型のコンテナ。
IconButton — アイコンをタップ可能なボタンにするウィジェット。ここではチェック状態の切り替えに使用。
Icons.check_circle / Icons.radio_button_unchecked — Flutter 公式のアイコン。完了／未完了でアイコンを切り替える。
Column + Expanded — テキストを縦方向に積み、余った幅を占有させるレイアウト。
Text — タイトル・説明・期日を表示。それぞれ色やサイズを調整して視認性を高めている。
todo プロパティ — Todo モデルを受け取り、カード内部の文言を動的に生成。
Column + Expanded — テキストを縦方向に積み、余った幅を占有させるレイアウト。
Text — todo.title / todo.detail / todo.dueDate を表示し、内容に応じて自動反映。
intl パッケージ（DateFormat） — todo.dueDate を「12月30日(月)」のような表記に変換。

3. 実際の使用例

作成したパーツは以下のように使用できます：

// TODOデータを作成
Todo myTodo = Todo(
  title: "英語の宿題",
  detail: "教科書のp.50-60を読んで要約する",
  dueDate: DateTime(2025, 12, 30),
  isCompleted: false, // まだ完了していない
);

// カード部品でTODOを表示
TodoCard(todo: myTodo)

4. TodoCard をアプリに表示してみよう

最後に、作成した TodoCard が実際のアプリ画面に表示されるか確認します。

📝 main.dart にウィジェットを読み込む
1.lib/main.dart を開きます。
2.MaterialApp の home に TodoCard を配置しましょう。
※本来は複数の TodoCard をリストで表示しますが、ここではTodoCardが正しく表示されるか確認するために1つのカードを表示します。

lib/main.dart

import 'package:flutter/material.dart';
import 'widgets/todo_card.dart';   // 追加: TodoCard をインポート
import 'models/todo.dart';        // Todo モデルをインポート

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Todo App')),
        body: Center(
          child: TodoCard(
            todo: Todo(
              title: 'テストタイトル',
              detail: '説明文',
              dueDate: DateTime.now(),
            ),
            onToggle: () {},
          ),
        ),
      ),
    );
  }
}

ターミナルで次のコマンドを実行し、エミュレーター上にカードが表示されることを確認してください。

flutter run

✅ 青いカードと未完了のチェックアイコン、タスクのタイトルなどが表示されれば成功です！

カードの表示
💡 実装のポイント
🏷️ 分かりやすい名前をつける
・Good: Todo, TodoCard, title, detail
・Bad: Data, Widget1, str1, str2
名前を見ただけで、何のためのものかが分かるようにしましょう。

🔧 required（必須）の活用
requiredキーワードを使うことで、重要な情報の入力し忘れを防げます。 これは、アンケートの「必須項目」と同じ仕組みです。

🎨 統一されたデザイン
CardやListTileを使うことで、Android・iOSの標準的なデザインが適用され、ユーザーにとって使いやすいUIになります。

データモデルの実装

前のステップでTodoパーツ（部品）の基本的な実装が完了しました。

この章では、実装の概要で説明した3番目のステップ「データモデルの実装」を行います。前回作った基本的な設計図をさらに発展させて、より本格的なデータ管理の仕組みを作っていきます。

🎯 この章のゴール

本格的なTodoモデルを作成し、実用的なデータ構造を定義する
データ管理サービスを実装し、データの保存・読み込みを可能にする
非同期処理の概念を理解し、実装する

🏗️ データモデルって何？

📚 例：図書館の本の管理

図書館で本を管理することを考えてみましょう：

本の情報: タイトル、著者、ISBN（識別番号）、貸出状況
管理システム: 本を探す、貸し出す、返却する、新しい本を登録する
永続化: システムを閉じても、本の情報は残っている
TODOアプリでも同じように、タスクの情報を体系的に管理する仕組みが必要です。

📋 作業手順

1. 本格的なTodoモデルの作成

前回の基本版を発展させて、実用的な機能を追加します。

🆔 なぜIDが必要？
まず、なぜ各タスクに「ID」という識別番号が必要なのかを理解しましょう。

例：クラスの出席管理

同じ名前の学生が2人いる場合、学籍番号で区別する
「田中さん」だけでは、どちらの田中さんか分からない
学籍番号があれば、確実に個人を特定できる
TODOアプリでも同様に、同じタイトルのタスクが複数あっても、IDで区別できます。

🏗️ 改良版Todoクラスの作成
lib/models/todo.dartファイルを編集します：

import 'package:uuid/uuid.dart';  // 一意なIDを生成するライブラリ

class Todo {
  final String id;          // 各タスクの固有識別番号
  final String title;       // タスクのタイトル（例：「レポートを書く」）
  final String detail;      // タスクの詳細（例：「心理学のレポート、2000字」）
  final DateTime dueDate;   // 期日（例：DateTime(2025, 4, 1)）
  final bool isCompleted;   // チェック済みかどうか（true: 完了, false: 未完了）

  Todo({
    String? id,                       // IDが指定されない場合は自動生成
    required this.title,              // タイトルは必須
    required this.detail,             // 詳細も必須
    required this.dueDate,            // 期日も必須
    this.isCompleted = false,         // デフォルトは「未完了」
  }) : id = id ?? const Uuid().v4();  // IDの自動生成

  // 既存のTodoを一部変更したコピーを作成するメソッド
  Todo copyWith({
    String? title,
    String? detail,
    DateTime? dueDate,
    bool? isCompleted,
  }) {
    return Todo(
      id: id,                                       // IDは変更しない
      title: title ?? this.title,                   // 新しいタイトル or 元のタイトル
      detail: detail ?? this.detail,                // 新しい詳細 or 元の詳細
      dueDate: dueDate ?? this.dueDate,             // 新しい期日 or 元の期日は変更しない
      isCompleted: isCompleted ?? this.isCompleted, // 新しい状態 or 元の状態
    );
  }
}

🔍 コードの詳細説明
IDの自動生成

id = id ?? const Uuid().v4();

・?? は「もし左側がnullなら右側を使う」という意味
・Uuid().v4() は世界中で重複しない一意なIDを生成
copyWithメソッドの意味

Todo copyWith({String? title, bool? isCompleted})

・既存のTodoの情報を保持しつつ、一部だけを変更した新しいTodoを作成
・例：タスクの完了状態だけを変更したい時に使用
実際の使用例

// 新しいタスクを作成
Todo task = Todo(title: "レポートを書く");

// タスクを完了に変更（元のtaskは変更せず、新しいインスタンスを作成）
Todo completedTask = task.copyWith(isCompleted: true);

2. データ管理サービスの作成

次に、TODOデータを保存・読み込みする「サービス」を作成します。

📱 スマートフォンにデータを保存する方法
スマートフォンにデータを保存する方法はいくつかありますが、今回はSharedPreferencesというパッケージを使います。

例：アプリの設定情報

・言語設定、テーマ設定、ログイン情報など
・アプリを閉じても次回起動時に復元される
・簡単なデータの保存に適している
⏰ 非同期処理って何？
同期処理（普通の処理）
・A → B → C の順番で実行
・Aが終わるまでBは待機

非同期処理
・時間のかかる作業（データ保存・読み込み）を別で実行
・メインの処理は止まらない
・完了したら結果を受け取る

日常例：レストランでの注文
・🚫 同期: 一人の注文が完全に終わるまで次の人は注文できない
・✅ 非同期: 複数の注文を同時に受けて、できた順番で提供
🛠️ TodoServiceの実装
lib/services/todo_service.dartファイルを作成します：

プロジェクト内のディレクトリ構成
lib/ アプリの核となるフォルダ
├── main.dart アプリの開始地点
└── services/ （データ管理フォルダ）
└── todo_service.dart （データの保存・読み込み）

import 'dart:convert'; // JSONデータの変換用
import 'package:shared_preferences/shared_preferences.dart'; // データ保存用
import '../models/todo.dart'; // 作成したTodoクラスを使用

class TodoService {
  static const String _storageKey = 'todos'; // 保存時のキー名
  final SharedPreferences _prefs; // データ保存の仕組み

  TodoService(this._prefs);

  // 保存されているTODOリストを読み込む（非同期処理）
  Future<List<Todo>> getTodos() async {
    // 保存されているJSONデータを取得
    final String? todosJson = _prefs.getString(_storageKey);

    // データがない場合は空のリストを返す
    if (todosJson == null) return [];

    // JSON文字列をDartのオブジェクトに変換
    final List<dynamic> decoded = jsonDecode(todosJson);

    // 各データをTodoオブジェクトに変換してリストにする
    return decoded
        .map((json) => Todo(
              id: json['id'],
              title: json['title'],
              detail: json['detail'] ?? '', // detailがない場合は空文字
              dueDate: DateTime.parse(json['dueDate'] ??
                  DateTime.now().toIso8601String()), // dueDateがない場合は現在日時
              isCompleted: json['isCompleted'],
            ))
        .toList();
  }

  // TODOリストを保存する（非同期処理）
  Future<void> saveTodos(List<Todo> todos) async {
    // TodoオブジェクトをJSONに変換できる形に変換
    final List<Map<String, dynamic>> encoded = todos
        .map((todo) => {
              'id': todo.id,
              'title': todo.title,
              'detail': todo.detail,
              'dueDate':
                  todo.dueDate.toIso8601String(), // DateTimeをISO8601形式の文字列に変換
              'isCompleted': todo.isCompleted,
            })
        .toList();

    // JSON文字列に変換して保存
    await _prefs.setString(_storageKey, jsonEncode(encoded));
  }
}

🔍 技術用語の説明

JSON（ジェイソン）

JavaScript Object Notationの略
データを文字列で表現する方法
例：{"name": "田中", "age": 20}
async/await

非同期処理を分かりやすく書くためのキーワード
async: この関数は非同期処理を含む
await: この処理の完了を待つ
Future

「将来値が返される予定」を表すデータ型
時間のかかる処理（ファイル読み込み、ネットワーク通信など）で使用

3. 実際の使用例

作成したサービスの使用方法：

// サービスの初期化
SharedPreferences prefs = await SharedPreferences.getInstance();
TodoService todoService = TodoService(prefs);

// データの読み込み
List<Todo> todoList = await todoService.getTodos();

// 新しいタスクを追加
todoList.add(Todo(title: "新しいタスク", detail: "新しいタスクの詳細", dueDate: DateTime.now(), isCompleted: false));

// データの保存
await todoService.saveTodos(todoList);

💡 実装のポイント

🔒 データの安全性

不変性: 一度作ったオブジェクトは変更せず、新しいオブジェクトを作成
型安全: 正しいデータ型のみを受け入れる

⚡ 効率性

非同期処理: UIがフリーズしない
適切なデータ構造: 必要な情報だけを保存

🔧 保守性

責任の分離: データ管理はServiceクラスが担当
再利用性: 他の画面からも同じサービスを使用可能

Todoリスト画面の実装

前のステップでデータモデルの実装が完了しました。

この章では、実装の概要で説明した4番目のステップ「Todoリスト画面の実装」を行います。これまで作成したデータモデルとパーツを組み合わせて、実際にTodoリストを画面に表示する機能を実装していきます。

🎯 この章のゴール

Todoリスト画面を実装し、複数のタスクを一覧表示する
ListViewを使ったスクロール可能なリスト表示を理解する
作成したTodoパーツを実際に活用する
動的なリスト生成の仕組みを学ぶ
完成リスト表示のイメージ
リストの表示

📜 リスト表示って何？

📚 例：本棚の整理

本棚で本を整理することを考えてみましょう：

縦に並べる: 本を縦に積み重ねて整理
同じ形式: 全ての本が同じように表示される
スクロール: 本が多い場合は上下に見る範囲を移動
効率的: 一つのレイアウトで多くの情報を表示
TODOアプリでも同様に、複数のタスクを効率的に一覧表示する必要があります。

🎯 なぜリスト表示が重要？

効率的な情報表示

1つの画面で多くのタスクを確認可能
一貫したデザインで見やすい
スクロールで全てのタスクにアクセス可能

📋 作業手順

まず、TodoCardを利用してリストを表示するコンポーネントを作成します。

1. リスト表示の仕組みを理解する

🏗️ ListViewの基本概念
ListViewは、スマートフォンアプリでよく使われるリスト表示の仕組みです。

日常例：ニュースアプリ

記事のタイトルが縦に並んでいる
同じフォーマットで表示される
上下にスクロールして全記事を見られる
新しい記事が追加されると自動的にリストに表示
🔄 ListView.builderの特徴

ListView.builder(
  itemCount: todos.length,        // 表示する項目の数
  itemBuilder: (context, index) { // 各項目を作る「工場」
    return TodoCard(todo: todos[index]);
  },
)

builderパターンの例：お弁当工場

設計図: TodoCardの作り方
材料: todosリストのデータ
工場のライン: itemBuilder関数
出来上がり: 画面に表示されるTodoカードの一覧

2. 実際のコード実装

📁 todo_list.dartファイルを準備
widgetsフォルダにtodo_list.dartファイルを作成します。

プロジェクト内のディレクトリ構成
lib/ アプリの核となるフォルダ
├── main.dart アプリの開始地点
├── widgets/
│ └── todo_list.dart

📝 テスト用データの準備
まず、表示確認のためのサンプルデータを作成します：

final List<Todo> todos = [
  Todo(
    title: '大学のレポート',
    detail: '心理学のレポートを2000字で書く',
    dueDate: DateTime(2025, 1, 15),
    isCompleted: false,
  ),
  Todo(
    title: '買い物',
    detail: '牛乳、パン、卵を買う',
    dueDate: DateTime(2025, 1, 10),
    isCompleted: true,
  ),
  Todo(
    title: 'アルバイト',
    detail: '金曜日のシフト、17時から21時',
    dueDate: DateTime(2025, 1, 12),
    isCompleted: false,
  ),
  Todo(
    title: '友達との約束',
    detail: '土曜日に映画を見に行く',
    dueDate: DateTime(2025, 1, 20),
    isCompleted: false,
  ),
  Todo(
    title: '図書館',
    detail: '借りた本を返却する（期限：来週火曜日）',
    dueDate: DateTime(2025, 1, 9),
    isCompleted: true,
  ),
];

🎨 画面のレイアウト構成
完全な画面を作成するコード例：

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart'; // 日本語などロケール情報を読み込む

import '../models/todo.dart'; // 作成したTodoクラス
import '../widgets/todo_card.dart'; // 作成したTodoCardウィジェット

class TodoList extends StatefulWidget {
  const TodoList({super.key});

  @override
  State<TodoList> createState() => TodoListState();
}

class TodoListState extends State<TodoList> {
  // テスト用のTodoデータ（あとで追加画面から動的に増える想定）
  final List<Todo> todos = [
    Todo(
      title: '大学のレポート',
      detail: '心理学のレポートを2000字で書く',
      dueDate: DateTime(2025, 1, 15),
      isCompleted: false,
    ),
    Todo(
      title: '買い物',
      detail: '牛乳、パン、卵を買う',
      dueDate: DateTime(2025, 1, 10),
      isCompleted: true,
    ),
    Todo(
      title: 'アルバイト',
      detail: '金曜日のシフト、17時から21時',
      dueDate: DateTime(2025, 1, 12),
      isCompleted: false,
    ),
    Todo(
      title: '友達との約束',
      detail: '土曜日に映画を見に行く',
      dueDate: DateTime(2025, 1, 20),
      isCompleted: false,
    ),
    Todo(
      title: '図書館',
      detail: '借りた本を返却する（期限：来週火曜日）',
      dueDate: DateTime(2025, 1, 9),
      isCompleted: true,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: TodoCard(todo: todos[index]),
        );
      },
    );
  }
}

🔍 コードの詳細説明
ℹ️ StatefulWidget と StatelessWidget とは？
|種類| ざっくり定義 |典型的な使い方|
|StatelessWidget| 一度描画したら基本的に見た目が変わらない ウィジェット。外部から渡された 入力データ だけで UI を構成し、内部で値を保持しない。| アイコン、固定テキスト、装飾だけのカードなど「表示専用」のパーツ|
|StatefulWidget| 描画後でも 内部状態（State）を持ち、setState() で再描画 できるウィジェット。ユーザー操作やネットワーク結果などに応じて UI が変わる。| 入力フォーム、リストの追加削除、チェックボックス、アニメーションなど「動きのある」パーツ|
この 2 つは「ノートのコピー」と「ホワイトボード」の違いに例えられます。

・ノートのコピー（Stateless）… 印刷した後は内容が変わらない。
・ホワイトボード（Stateful）… 何回でも書き換えて最新情報を表示できる。

ℹ️ なぜ StatefulWidget を使うの？

今は固定のテストデータですが、次の章で「＋」ボタンを押して新しい Todo を追加できるようになります。 その際、リストの内容（todos 配列）が 動的に変化 するため、

・データが変わったら setState() で画面を再描画する
という仕組みが必要です。これを実現できるのが StatefulWidget です。

一方で、TodoCard のように表示内容が外部から渡されるだけで内部状態を持たない UI は StatelessWidget のままで OK です。

ListView.builder

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TodoCard(todo: todos[index]),
    );
  },
)

・itemCount: 「何個の項目を表示するか」
・itemBuilder: 「各項目をどう作るか」の関数
・index: 現在作成中の項目番号（0, 1, 2, ...）
・Padding（パディング）

Padding(
  padding: EdgeInsets.all(8.0),
  child: TodoCard(...),
)

各TodoCard間に余白を追加
見やすいレイアウトを作るため

3. 動作の流れ

1.データ準備: todosリストに5つのTodoデータが格納
2.ListView起動: 5つの項目を表示する指示
3.繰り返し処理: index 0〜4 まで順番に実行
index=0: 1つ目のTodo「大学のレポート」でTodoCard作成
index=1: 2つ目のTodo「買い物」でTodoCard作成
...以下同様
4.画面表示: 作成された5つのTodoCardが縦に並んで表示
5.スクロール: 項目が多い場合は上下スクロール可能

4. Todoリストを表示してみよう

TodoList ウィジェットを表示する土台 となるリスト画面を作ります。ファイル構成は次のようになります。

プロジェクト内のディレクトリ構成
lib/
├── main.dart
├── screens/
│ └── list_screen.dart ← ★新規
├── widgets/
│ ├── todo_card.dart
│ └── todo_list.dart ← この章で実装済み

list_screen.dart を以下のコードで作成しましょう。

lib/screens/list_screen.dart

import 'package:flutter/material.dart';
import '../widgets/tood_list.dart';

class ListScreen extends StatefulWidget {
  const ListScreen({super.key});

  @override
  ListScreenState createState() => ListScreenState();
}

class ListScreenState extends State<ListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TODOリスト')),
      body: TodoList(), // TodoList ウィジェットを配置
    );
  }
}

main.dart では ListScreen を呼び出すだけでリスト画面が表示できます。

1.lib/main.dart を開きます。
2.MaterialApp の home で TodoCard だった部分を ListScreen に置き換えましょう。
lib/main.dart

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart'; // 日本語などロケール情報を読み込む
import 'screens/list_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // DateFormat で日本語表記を使えるようロケールを初期化
  await initializeDateFormatting('ja'); // 他言語の場合は"en"などに変更
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ListScreen(),
    );
  }
}

🔍 コードの詳細説明
なぜロケール設定（initializeDateFormatting）が必要？
日付を「12月30日(月)」のように日本語表記で表示するには、端末にある日本語の曜日・月名データをアプリ側が読み込む必要があります。

イメージとしては、

📚 辞書（ロケールデータ）を開いて、数字の "12" を見たときに「December」ではなく「12月」と読む方法を教える

という作業を一度アプリ起動時に行う感じです。

initializeDateFormatting('ja') を呼ぶことで、

1.日本語ロケールの辞書ファイルを読み込み
2.DateFormat('M月d日(E)') が正しく日本語で日付を生成
となります。英語だけで良い場合は不要ですが、日本語・フランス語など特定言語で曜日を表示したい時は必須です。

✅ 5つのTodoCardが表示されれば成功です！

リストの表示

新規作成ボタンの実装

🎯 ゴール
画面右下に Todo追加ボタン（FloatingActionButton）を配置する
※実際の画面遷移は次の章で行います。

完成イメージ
追加ボタン表示

📋 作業手順

1. ボタンをレイアウトに追加
   Scaffold には標準で floatingActionButton というプロパティが用意されています。ここに FloatingActionButton を設定するだけで、右下に "ふわっ" と浮かぶボタンが表示されます。

import 'package:flutter/material.dart';

import '../models/todo.dart';
import '../widgets/tood_list.dart';
import 'add_todo_screen.dart';

class ListScreen extends StatefulWidget {
  const ListScreen({super.key});

  @override
  ListScreenState createState() => ListScreenState();
}

class ListScreenState extends State<ListScreen> {
  // TodoList の状態を操作するためのキー
  final GlobalKey<TodoListState> _todoListKey = GlobalKey<TodoListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TODOリスト')),
      body: TodoList(key: _todoListKey), // TodoList ウィジェットを配置
      floatingActionButton: FloatingActionButton(
        onPressed: () {}, // 画面遷移については次の章で実装します
        backgroundColor:
            const Color.fromARGB(255, 0, 0, 255), // ボタン色（RGBAでも指定できます）
        foregroundColor: Colors.white,
        child: const Icon(Icons.add), // Flutter標準の「＋」アイコン
      ),
    );
  }
}

🔍 コードの解説

ℹ️ FloatingActionButton ってなに？
FloatingActionButton は標準で丸いボタンが用意されているので、アイコンを渡すだけでOKです。

ℹ️ Icons.add ってなに？
Icons.add は Flutterに最初から含まれている追加アイコンです。「＋」マークを表示します。

GlobalKey ってなに？
GlobalKey<TodoListState> は 特定のウィジェット（ここでは TodoList）の「住所」 をアプリ全体で一意に示す札のようなものです。
この札を使うと、別の場所にいるウィジェットからでも そのウィジェットの状態(State) に安全にアクセスできます。

例え話：

📮 郵便番号 + 住所 = 家を一発で特定できる
GlobalKey = ウィジェットを一発で特定できる

実際の使い方（今回のコード）

// 1) ListScreen でキーを作成
final _todoListKey = GlobalKey<TodoListState>();

// 2) TodoList にキーを渡す
body: TodoList(key: _todoListKey),

// 3) 追加画面から戻ってきたあとにリストへ新しい Todo を追加
_todoListKey.currentState?.addTodo(newTodo);

ポイントは次の 3 つです。

1.一意性: 同じキーは 1 つだけ。だから確実にそのウィジェットを指し示せる。
2.State へのアクセス: currentState プロパティ経由でウィジェット内部のメソッドが呼べる。
3.乱用注意: 便利ですが多用すると依存関係が複雑になるので、「どうしても必要な場面」に絞って使いましょう。

今回のケースでは、ListScreen（親）側から TodoList（子）に向けて、画面遷移後に取得した新しい Todo を追加する という明確な目的があるため GlobalKey が適切に機能します。

実際のデータを反映できるようにする

次の章では新規のTodoを追加します。 実際にデータを反映できるようにするために、テストデータから空のリストに変更しておきます。 また、Todoの追加画面からデータを受け取ってリストに追加するために、関数addTodo を定義しておきます。

下記のように、TodoList クラス内の空のリストと、addTodo関数を定義します。

// 一部省略

class TodoListState extends State<TodoList> {
  final List<Todo> todos = [];          // ← 空のリスト  （テストデータを削除）
  void addTodo(Todo newTodo) {          // ← Todoの追加画面からデータを受け取る関数
    setState(() => todos.add(newTodo));
  }
}

Todo追加画面の実装

前のステップでTodoリスト画面の実装が完了しました。

この章では、実装の概要で説明した5番目のステップ「Todo追加画面の実装」を行います。ユーザーが新しいタスクを入力・追加できる画面を作成し、リスト画面と連携させていきます。

🎯 この章のゴール

新しいタスク入力画面を作成する
画面間の移動（ナビゲーション）を実装する
入力フォームの仕組みを理解し、実装する
入力データの検証（バリデーション）を学ぶ
完成Todo追加画面のイメージ
作成ボタンが非活性状態
作成ボタンが非活性状態
作成ボタンが活性状態
作成ボタンが活性状態
_openAddTodoScreen: Navigator.push で入力画面を開き、Navigator.pop で戻る際に新しい Todo データを受け取ります。
setState: リストにデータを追加した後に呼ぶと、画面が自動で更新されます。

🚪 画面遷移って何？

📚 例：図書館での本の検索

図書館で本を探すことを考えてみましょう：

メイン画面: 図書館の案内板（全体の案内）
検索画面: 本の検索フォーム（タイトルや著者を入力）
結果画面: 検索結果の一覧（見つかった本のリスト）
詳細画面: 特定の本の詳細情報
各画面は「戻る」「進む」「別の画面へ」などの移動ができます。

スマートフォンアプリでも同様に、複数の画面を行き来することで様々な機能を提供します。

🎯 なぜ別画面が必要？

画面の役割分担

リスト画面: 一覧表示に特化、見やすい
入力画面: 入力作業に特化、使いやすい
編集画面: 修正作業に特化、間違いを防ぐ

📋 作業手順

1. 画面遷移の仕組みを理解する

🚀 Navigatorの基本概念
Navigatorは、アプリ内での画面移動を管理する仕組みです。

日常例：本のページめくり

push: 新しいページを上に重ねる（新しい画面を開く）
pop: 上のページを取り除く（前の画面に戻る）
stack: ページの重なり具合を管理

// 新しい画面を開く
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => TodoInputScreen()),
);

// 前の画面に戻る
Navigator.pop(context);

2. 空の入力画面を作成する
   本格的なフォームを作る前に、まずはタイトルバーだけの空画面を作成して画面遷移が正しく動くか確認しましょう。

プロジェクト内のディレクトリ構成
lib/
├── screens/
│ └── add_todo_screen.dart ← ★新規

lib/screens/add_todo_screen.dart

import 'package:flutter/material.dart';

class AddTodoScreen extends StatefulWidget {
  const AddTodoScreen({super.key});

  @override
  State<AddTodoScreen> createState() => _AddTodoScreenState();
}

class _AddTodoScreenState extends State<AddTodoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('新規作成')),
      body: const Center(child: Text('ここにフォームを作成していきます')), // 仮置き
    );
  }
}

3. ListScreen から遷移する

下記のように ListScreen クラスの中で AddTodoScreen クラスをインポートして、遷移するための関数Navigator.push を呼び出します。

import 'package:flutter/material.dart';
import 'package:todo_app/models/todo.dart';
import 'package:todo_app/screens/add_todo_screen.dart';

import '../widgets/tood_list.dart';

class ListScreen extends StatefulWidget {
  const ListScreen({super.key});

  @override
  ListScreenState createState() => ListScreenState();
}

class ListScreenState extends State<ListScreen> {
  // TodoList の状態を操作するためのキー
  final GlobalKey<TodoListState> _todoListKey = GlobalKey<TodoListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TODOリスト')),
      body: TodoList(key: _todoListKey), // TodoList ウィジェットを配置
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 画面遷移し、戻ってきたら結果（新規 Todo）を受け取る
          final result = await Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const AddTodoScreen()),
          );

          // 返却されたデータが Todo であればリストへ追加
          if (result != null) {
            // 後々使うので一旦コメントアウト
            // _todoListKey.currentState?.addTodo(result);
          }
        }, // 画面遷移については次の章で実装します
        backgroundColor:
            const Color.fromARGB(255, 0, 0, 255), // ボタン色（RGBAでも指定できます）
        foregroundColor: Colors.white,
        child: const Icon(Icons.add), // Flutter標準の「＋」アイコン
      ),
    );
  }
}

✅ 画面遷移してタイトルバー「新規作成」が表示されれば準備完了です。

空の追加画面の表示

4. 入力画面の実装

📝 基本的な入力フォームの作成

import 'package:flutter/material.dart';

import '../models/todo.dart';

class AddTodoScreen extends StatefulWidget {
  const AddTodoScreen({super.key});

  @override
  AddTodoScreenState createState() => AddTodoScreenState();
}

class AddTodoScreenState extends State<AddTodoScreen> {
  // 入力内容を管理するコントローラー
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _detailController = TextEditingController();
  final TextEditingController _dateController =
      TextEditingController(); // 期日表示用

  DateTime? _selectedDate; // 選択された期日

  // フォームの入力検証用
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  bool _isFormValid = false; // フォーム入力が完了しているか

  @override
  void initState() {
    super.initState();
    // テキスト入力が変わるたびにチェック
    _titleController.addListener(_updateFormValid);
    _detailController.addListener(_updateFormValid);
  }

  /// 全入力欄が埋まっているかを判定し、
  /// ボタンの活性状態（押せる/押せない）を更新するメソッド
  void _updateFormValid() {
    setState(() {
      _isFormValid = _titleController.text.isNotEmpty &&
          _detailController.text.isNotEmpty &&
          _selectedDate != null; // 期日が選択されているか
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('新しいタスクを追加'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          // 入力フォームの枠組み
          key: _formKey,
          child: Column(
            children: [
              // タイトル入力フィールド
              TextFormField(
                controller: _titleController,
                decoration: const InputDecoration(
                  labelText: 'タスクのタイトル',
                  hintText: '20文字以内で入力してください',
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  // 入力チェック
                  if (value == null || value.isEmpty) {
                    return 'タイトルを入力してください';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 16), // 余白

              // 詳細入力フィールド
              TextFormField(
                controller: _detailController,
                decoration: const InputDecoration(
                  labelText: 'タスクの詳細',
                  hintText: '入力してください',
                  border: OutlineInputBorder(),
                ),
                maxLines: 3, // 複数行入力可能
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '詳細を入力してください';
                  }
                  return null;
                },
              ),

              const SizedBox(height: 16),

              // 📅 期日入力フィールド（DatePicker）
              TextFormField(
                controller: _dateController,
                readOnly: true, // キーボードを表示しない
                decoration: const InputDecoration(
                  labelText: '期日',
                  hintText: '年/月/日',
                  border: OutlineInputBorder(),
                ),
                onTap: () async {
                  // 日付選択ダイアログを開く
                  DateTime? picked = await showDatePicker(
                    context: context,
                    initialDate: DateTime.now(),
                    firstDate: DateTime.now(),
                    lastDate: DateTime(2100),
                  );
                  if (picked != null) {
                    // 選択した日付をコントローラに反映
                    _selectedDate = picked;
                    _dateController.text =
                        '${picked.year}/${picked.month}/${picked.day}';

                    // 期日を選んだあともフォーム状態を再評価
                    _updateFormValid();
                  }
                },
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '期日を選択してください';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 24),

              // 作成ボタン
              ElevatedButton(
                onPressed: _isFormValid ? _saveTodo : null,
                style: ElevatedButton.styleFrom(
                  backgroundColor: _isFormValid
                      ? const Color.fromARGB(255, 0, 0, 255)
                      : Colors.grey.shade400,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 32, vertical: 12),
                ), // 入力完了で活性化
                child: Text(
                  'タスクを追加',
                  // テキストの色を変更
                  style: TextStyle(
                    color: _isFormValid ? Colors.white : Colors.grey,
                    fontSize: 18,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // タスク作成処理
  void _saveTodo() {
    if (_formKey.currentState!.validate()) {
      // 入力チェック
      // 新しいTodoを作成
      Todo newTodo = Todo(
        title: _titleController.text,
        detail: _detailController.text,
        dueDate: _selectedDate!,
      );

      // 前の画面に戻る（作成したTodoデータと一緒に）
      Navigator.pop(context, newTodo);
    }
  }

  @override
  void dispose() {
    // 画面が閉じられる時の処理
    _titleController.dispose(); // メモリの解放
    _detailController.dispose();
    _dateController.dispose();
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 初期表示時にもバリデーション
    _updateFormValid();
  }
}

🔍 コードの詳細説明

StatefulWidget

class TodoInputScreen extends StatefulWidget

状態が変化する画面（入力内容が変わる）
ユーザーの入力に応じて画面が動的に変化
TextEditingController

final TextEditingController _titleController = TextEditingController();

テキスト入力フィールドの内容を管理
入力された文字列を取得・設定可能
Form & TextFormField

Form(
  key: _formKey,
  child: TextFormField(...)
)

Form: 複数の入力フィールドをまとめて管理
TextFormField: 検証機能付きの入力フィールド
validator（バリデーター）

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'タイトルを入力してください';
  }
  return null;
}

入力内容の検証（空文字チェックなど）
エラーメッセージの表示
入力必須項目の確認
DatePicker（日付選択） フィールドをタップするとカレンダーを表示し、選んだ日付を _dateController へ書き込む。

_isFormValid フラグ & _updateFormValid メソッド

bool _isFormValid = false;

タイトル・詳細・期日の3項目がすべて入力済みかどうかを確認し、作成ボタンの活性/非活性を即時反映する。

ElevatedButton（作成ボタン）

onPressed: _isFormValid ? _saveTodo : null

フォームが未入力のときはボタンを押せないように null を渡し、背景色もグレーにしてユーザーに状態を伝えます。

dispose() と didChangeDependencies() 画面が閉じられる際にコントローラを解放してメモリリークを防ぎ、初期描画直後にもバリデーションを実行します。

5. 画面間でのデータ受け渡し

📤 データを返却する側（入力画面）

// 前の画面に戻る時にデータを渡す
Navigator.pop(context, newTodo);

📥 返却されたデータを受け取る側（リスト画面）
ListScreenState の中にある 後々使うので一旦コメントアウトのコメントアウトを外してみましょう。 追加画面で作成したTodoを一覧画面のリストに追加することができるようになります。

// 返却されたデータが Todo であればリストへ追加
if (result != null) {
  // 後々使うので一旦コメントアウト
  _todoListKey.currentState?.addTodo(result);          // コメントアウトを外す
}

6. ユーザビリティの向上

🎨 使いやすい入力フォームの作成
ヒントテキストの活用

decoration: InputDecoration(
  labelText: 'タスクのタイトル',
  hintText: '例：レポートを書く',          // 入力例を表示
  border: OutlineInputBorder(),
)

適切な入力タイプの指定

TextFormField(
  keyboardType: TextInputType.multiline,  // 複数行入力用キーボード
  maxLines: 3,                           // 最大3行まで表示
)

フォーカス管理

// 自動的に最初のフィールドにフォーカス
autofocus: true,

💡 実装のポイント

🔍 入力検証（バリデーション）
必須項目チェック: 空文字の防止
文字数制限: 適切な長さの確認
即座のフィードバック: エラーメッセージの表示
📱 ユーザーエクスペリエンス
直感的なデザイン: ボタンの色や配置
分かりやすいラベル: 何を入力するかが明確
適切なキーボード: 入力内容に応じたキーボード表示
🔄 データの流れ
画面遷移: push → 入力 → pop
データ受け渡し: 前の画面との情報共有
状態更新: リストの即座な反映

状態管理の実装

前のステップでTodo追加画面の実装が完了しました。

この章では、実装の概要で説明した6番目（最後）のステップ「状態管理の実装」を行います。これまでに作成した全ての部品を組み合わせて、完全に動作するTodoアプリを完成させます。

また今まで作成したアプリは、アプリのメモリ上にデータが保存されているだけで、一度アプリを終了するとデータが失われてしまいます。

この章では、アプリを終了してもデータが失われないように、データを永続化する方法も学びます。

🎯 この章のゴール

状態管理の概念を理解し、実装する
画面間でのデータ共有を実現する
リアルタイムな画面更新を可能にする
データの永続化を実現する
完全に動作するTodoアプリを完成させる
🎭 状態管理って何？
🎪 例：劇場での演劇
劇場での演劇を考えてみましょう：

台本: 全体のストーリー（アプリの設計）
演出家: 全体を管理する人（状態管理システム）
俳優: 各役割を演じる人（各画面・コンポーネント）
小道具: 劇中で使われる物（データ）
演出家の役割

俳優同士の連携を管理
小道具の出し入れを調整
全体の流れを把握し、調整
アプリでも同様に、各画面やデータの連携を管理する「演出家」的な仕組みが必要です。

🔄 なぜ状態管理が重要？

データの一貫性

リスト画面で表示されるタスク数
追加画面で入力された新しいタスク
完了したタスクの状態
これらの情報が、全ての画面で常に一致している必要があります。

例：銀行口座の管理

ATMで記録される残高
スマホアプリで表示される残高
通帳に記載される残高
これらが異なっていたら大問題ですよね。アプリでも同じことが言えます。

📋 作業手順

1. main.dartの変更

ここでは SharedPreferences を初期化し、そのインスタンスを使って TodoService を生成します。生成したサービスはアプリ全体で使えるように MyApp ウィジェットへ渡します。これにより、どの画面からでも Todo データの読み書きが行えるようになります。

💡 インスタンスって何？
プログラムで「設計図（クラス）」から実際に使える「モノ」を作った状態を インスタンス と呼びます。

・SharedPreferences prefs = ... の prefs は「SharedPreferences という設計図から作った実物」。
・TodoService todoService = TodoService(prefs) の todoService も同様に「TodoService の実物」で、 内部に prefs を抱えているので実際の保存・読み込みができるようになります。
家を建てるイメージで言えば、TodoService クラスが「設計図」、todoService が「建てた家」になります。

import 'services/todo_service.dart';
import 'package:shared_preferences/shared_preferences.dart';
// ほかの import は省略

void main() async {
  // Flutter のプラグイン初期化。非同期処理を行う場合は必須
  WidgetsFlutterBinding.ensureInitialized();

  // ① SharedPreferences を初期化（端末に小さなキー／バリューで保存できる）
  final prefs = await SharedPreferences.getInstance();

  // ② SharedPreferences を使って TodoService を生成（保存・読み込みの窓口）
  final todoService = TodoService(prefs);

  // ③ TodoService をアプリ全体へ渡す
  runApp(MyApp(todoService: todoService));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.todoService});

  // アプリ全体で共有する TodoService
  final TodoService todoService;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ListScreen にtodoServiceを引数としてわたす
      home: ListScreen(todoService: todoService),
    );
  }
}

2. list_screen.dart 変更

ListScreen では、main.dartから受け取った TodoService を子ウィジェットの TodoList と新規追加画面 AddTodoScreen に受け渡します。また、追加が完了した後にリストを再読み込みできるよう UniqueKey を使って TodoList を再描画します。

💡 UniqueKey とは？
Flutter では キー(Key) を付けることでウィジェットを一意に識別できます。
UniqueKey() は ウィジェットを識別するためのキーの一種で、特にウィジェットの状態をリセットしたい場合に有効です。 同じ型のウィジェットが複数存在する場合でも、それぞれを区別し、再構築が必要な場合に、 新しいウィジェットとして扱わせることができます。
複雑な再描画ロジックを書かずに 手軽にウィジェットを作り直すテクニック と覚えておきましょう。

import '../services/todo_service.dart';
（省略）
class ListScreen extends StatefulWidget {
  const ListScreen({super.key, required this.todoService});　// ←追加

  final TodoService todoService;　// ←追加

（省略）
class ListScreenState extends State<ListScreen> {
  Key _listKey = UniqueKey(); // ←追加

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TODOリスト')),
      body: TodoList(
        key: _listKey, // ←追加
        todoService: widget.todoService, // ←追加
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 画面遷移し、戻ってきたら結果（新規 Todo）を受け取る
          final updated = await Navigator.push( // Todoに追加があったらtrueを返す
            context,
            MaterialPageRoute(
                builder: (context) => AddTodoScreen(
                      todoService: widget.todoService,  // ←追加
                    )),
          );

          // 追加があったら再描画（TodoList を再取得）  // ←追加
          if (updated == true) {
            setState(() {
              _listKey = UniqueKey(); // 新しいキーで TodoList を再構築
            });
          }
        },
（省略）

3. tood_list.dartの変更

TodoList は実際に Todo データを表示・追加・削除するウィジェットです。

画面が表示されたら _loadTodos() でストレージからデータを読み込みます。
新しいタスクが追加されたら addTodo() でリストに追加したあと saveTodos() で保存します。
チェックアイコンが押されたら _deleteTodo() でリストから削除し、同様に保存します。
ローディング中は CircularProgressIndicator を表示してユーザーに待機を知らせます。

import '../services/todo_service.dart'; // ←追加
（省略）
class TodoList extends StatefulWidget {
  const TodoList({super.key, required this.todoService}); // ←追加

  final TodoService todoService; // ←追加

（省略）
class TodoListState extends State<TodoList> {
  List<Todo> _todos = [];
  bool _isLoading = true; // ←追加

  @override
  void initState() {
    super.initState();
    _loadTodos(); // ←追加 SharedPreferences から読み込み
  }

  // データ読み込み処理関数を追加
  Future<void> _loadTodos() async {
    final todos = await widget.todoService.getTodos();
    setState(() {
      _todos = todos;
      _isLoading = false;
    });
  }

  // 追加画面から呼ばれる追加関数を追加
  void addTodo(Todo newTodo) async {
    setState(() => _todos.add(newTodo));
    await widget.todoService.saveTodos(_todos);
  }

  // チェックボタンから呼ばれる削除関数を追加
  Future<void> _deleteTodo(Todo todo) async {
    setState(() => _todos.removeWhere((t) => t.id == todo.id));
    await widget.todoService.saveTodos(_todos);
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) { // 読込中はローディングインジケーターを表示
      return const Center(child: CircularProgressIndicator());
    }
    return ListView.builder(
      itemCount: _todos.length,
      itemBuilder: (context, index) {
        final todo = _todos[index]; // ←追加
        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: TodoCard(
            todo: todo,
            onToggle: () => _deleteTodo(todo), // チェックで削除する処理を追加
          ),
（省略）

4. add_todo_screen.dartの変更

新規タスクを作成するときに、入力内容を Todo オブジェクトに変換し TodoService を介して保存します。保存が完了したら Navigator.pop(context, true) で「リストを更新してください」という合図だけを前の画面へ返します。

（省略）
// 作成ボタン
              ElevatedButton(
                onPressed: _isFormValid ? () => _saveTodo() : null, // 作成時に保存する処理を追加
                style: ElevatedButton.styleFrom(
（省略）
// タスク作成処理
  void _saveTodo() {
    if (_formKey.currentState!.validate()) {
      // 入力チェック
      // 新しいTodoを作成
      Todo newTodo = Todo(
        title: _titleController.text,
        detail: _detailController.text,
        dueDate: _selectedDate!,
      );

      // 既存リストを取得して追加する処理を追加  // ←追加 
      final todos = await widget.todoService.getTodos();
      todos.add(newTodo);
      await widget.todoService.saveTodos(todos);

      // この画面がまだ非表示にならずに残ってるか確認
      if (!mounted) return;

      // 前の画面へ「更新したよ」とだけ知らせる
      Navigator.pop(context, true); // ←変更
    }
  }

✅ Todoを追加して一度アプリを終了させてみましょう。再度アプリを起動して立ち上げたら、追加したTodoが表示されているはずです。

空の追加画面の表示
💡 実装のポイント
🎨 ユーザビリティ
読み込み中表示: データ取得中のインジケーター
🔄 データの流れ
初期化: アプリ起動時にデータ読み込み
操作: ユーザーの操作を受け付け
更新: 画面の即座更新
保存: データの永続化
🎉 完成！

✅ 完了したステップ
✅ プロジェクトの新規作成: 開発環境の準備
✅ Todoパーツの実装: 再利用可能な部品作成
✅ データモデルの実装: データ構造と管理サービス
✅ Todoリスト画面の実装: 一覧表示機能
✅ Todo追加画面の実装: 新規タスク入力機能
✅ 状態管理の実装: 全体統合と動作完成
🎯 完成したアプリの機能
✅ タスク一覧表示: 登録したタスクを見やすく表示
✅ タスク追加: 新しいタスクの入力・登録
✅ 完了切り替え: タスクの完了・未完了状態管理
✅ タスク削除: 不要なタスクの削除
✅ データ永続化: アプリを閉じても情報が保持される

🎉 基本部分の実装完了！

状態管理の実装が完了しました！これで基本部分の実装が完了し、Todoアプリが完成しました。

🏆 学習した内容
✅ 要件の確認: Todoアプリの仕様と目標を理解
✅ 実装の概要: 開発の流れとアーキテクチャを把握
✅ プロジェクト作成: Flutter開発環境の準備
✅ Todoパーツ実装: 再利用可能なUIコンポーネントの作成
✅ データモデル実装: データ構造とサービスの設計
✅ Todoリスト画面実装: データ表示機能の実装
✅ Todo追加画面実装: データ入力機能の実装
✅ 状態管理実装: アプリ全体の状態制御

🎯 習得したスキル
以下の重要なスキルを習得することができました：

📱 Flutter開発の基礎
Flutterプロジェクトの作成と設定
ウィジェットの構成と使い方
状態管理の基本概念
🏗️ アプリ設計・実装
コンポーネント指向の開発
データモデルの設計
画面間の連携と状態管理
💾 データ管理
ローカルデータの永続化
データベースの基本的な使い方
非同期処理の実装
🎨 UI/UX実装
リスト表示の実装
フォーム入力の処理
ユーザーインタラクションの実装

🚀 今回は、Flutterを使った本格的なアプリ開発の基礎を学習しました。