🐧

非エンジニアが Flutter × Riverpod × Hooks で診断アプリを作ってみた学習記録(仮)🐧

2025/03/29に公開

Flutter

趣味

tech

こんにちは、Flutter初心者の道上です！

今回は、Riverpod × Hooks × Freezed × GoRouter を使って、
“前世をジョークで診断する”アプリを作ってみたので、学習記録としてまとめました（※改善中）
GitHubリポジトリ→[https://github.com/yoichi4141/jokereincarnationdiagnosistool]

使用したもの
-Flutter（3.x）
-Riverpod（FutureProvider 使用）
-flutter_hooks / hooks_riverpod（UI状態管理）/ Freezed/ GoRouter
-Sourcetree（Git管理）

https://riverpod.dev/ja/
https://pub.dev/packages/flutter_hooks
https://pub.dev/packages/hooks_riverpod
https://pub.dev/packages/freezed
https://pub.dev/packages/go_router

アプリの内容

なぜこの構成にしたのか？

Flutterは自由度が高すぎて、最初どう構成するか分からなかったのですが、
いろいろな記事を見て「Riverpod + Hooks + Freezed + GoRouter」の構成を選びました。

今の自分なりに、こういう理解です：
モダンパッケージ

Riverpod → 非同期処理をまとめる場所
Hooks → setState不要にして、UIを軽く保てる
Freezed → モデルの使い回しや比較がしやすい
GoRouter → 複雑な遷移も1つのファイルに集約できる

早速コードです！↓※モダンパッケージ(上記)に関する解説/メモ/します！

main.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'router/app_router.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      routerConfig: appRouter,
    );
  }
}

runApp(const ProviderScope(child: MyApp()));

Riverpodを使うときに絶対に必要なラッパー
これによって、アプリ全体で ref.watch や ref.read などが使える状態になります

model/diagnosis_result.dart

import 'package:freezed_annotation/freezed_annotation.dart';

part 'diagnosis_result.freezed.dart';
part 'diagnosis_result.g.dart';

@freezed
class DiagnosisResult with _$DiagnosisResult {
  const factory DiagnosisResult({
    required String name, // 診断した名前
    required String result, // 前世のジョーク診断結果
    required DateTime createdAt, // 診断日時
  }) = _DiagnosisResult;

  factory DiagnosisResult.fromJson(Map<String, dynamic> json) =>
      _$DiagnosisResultFromJson(json);
}

@freezed
class DiagnosisResult with _$DiagnosisResult {

@freezed アノテーション（freezed_annotation）

モデルクラスをイミュータブル（不変）なデータ構造として定義するためのマクロ
copyWith, ==, hashCode, toString などを自動で実装してくれる
UI状態やデータの再利用に強く、Riverpodとの相性が◎らしい

const factory DiagnosisResult({
  required String name,
  required String result,
  required DateTime createdAt,
}) = _DiagnosisResult;

const factory + named constructor（freezedが生成元）

const factory にすることでイミュータブル性＋省メモリ
DiagnosisResult(...) のようにコンストラクタを使ってインスタンス化できる
copyWith を使って部分的な変更も可能

factory DiagnosisResult.fromJson(Map<String, dynamic> json) =>
    _$DiagnosisResultFromJson(json);

fromJson()（json_serializable による生成）

APIレスポンスからこのモデルに変換するための工夫
json_serializable パッケージが build_runner 実行時に diagnosis_result.g.dart を生成

part 'diagnosis_result.freezed.dart';
part 'diagnosis_result.g.dart';

ファイル冒頭の part 指定

まとめ：freezed + json_serializable の役割

イミュータブルモデル freezed 不変データ＋copyWith＋比較
JSON変換 json_serializable APIのMapをモデルに変換

lib/features/diagnosis/model/diagnosis_result.freezed.dart

// coverage:ignore-file
// GENERATED CODE - DO NOT MODIFY BY HAND
// ignore_for_file: type=lint
// ignore_for_file: unused_element, deprecated_member_use, deprecated_member_use_from_same_package, use_function_type_syntax_for_parameters, unnecessary_const, avoid_init_to_null, invalid_override_different_default_values_named, prefer_expression_function_bodies, annotate_overrides, invalid_annotation_target, unnecessary_question_mark

part of 'diagnosis_result.dart';

// **************************************************************************
// FreezedGenerator
// **************************************************************************

T _$identity<T>(T value) => value;

final _privateConstructorUsedError = UnsupportedError(
  'It seems like you constructed your class using `MyClass._()`. This constructor is only meant to be used by freezed and you are not supposed to need it nor use it.\nPlease check the documentation here for more information: https://github.com/rrousselGit/freezed#adding-getters-and-methods-to-our-models',
);

DiagnosisResult _$DiagnosisResultFromJson(Map<String, dynamic> json) {
  return _DiagnosisResult.fromJson(json);
}

/// @nodoc
mixin _$DiagnosisResult {
  String get name => throw _privateConstructorUsedError; // 診断した名前
  String get result => throw _privateConstructorUsedError; // 前世のジョーク診断結果
  DateTime get createdAt => throw _privateConstructorUsedError;

  /// Serializes this DiagnosisResult to a JSON map.
  Map<String, dynamic> toJson() => throw _privateConstructorUsedError;

  /// Create a copy of DiagnosisResult
  /// with the given fields replaced by the non-null parameter values.
  @JsonKey(includeFromJson: false, includeToJson: false)
  $DiagnosisResultCopyWith<DiagnosisResult> get copyWith =>
      throw _privateConstructorUsedError;
}

/// @nodoc
abstract class $DiagnosisResultCopyWith<$Res> {
  factory $DiagnosisResultCopyWith(
    DiagnosisResult value,
    $Res Function(DiagnosisResult) then,
  ) = _$DiagnosisResultCopyWithImpl<$Res, DiagnosisResult>;
  @useResult
  $Res call({String name, String result, DateTime createdAt});
}

/// @nodoc
class _$DiagnosisResultCopyWithImpl<$Res, $Val extends DiagnosisResult>
    implements $DiagnosisResultCopyWith<$Res> {
  _$DiagnosisResultCopyWithImpl(this._value, this._then);

  // ignore: unused_field
  final $Val _value;
  // ignore: unused_field
  final $Res Function($Val) _then;

  /// Create a copy of DiagnosisResult
  /// with the given fields replaced by the non-null parameter values.
  @pragma('vm:prefer-inline')
  @override
  $Res call({
    Object? name = null,
    Object? result = null,
    Object? createdAt = null,
  }) {
    return _then(
      _value.copyWith(
            name:
                null == name
                    ? _value.name
                    : name // ignore: cast_nullable_to_non_nullable
                        as String,
            result:
                null == result
                    ? _value.result
                    : result // ignore: cast_nullable_to_non_nullable
                        as String,
            createdAt:
                null == createdAt
                    ? _value.createdAt
                    : createdAt // ignore: cast_nullable_to_non_nullable
                        as DateTime,
          )
          as $Val,
    );
  }
}

/// @nodoc
abstract class _$$DiagnosisResultImplCopyWith<$Res>
    implements $DiagnosisResultCopyWith<$Res> {
  factory _$$DiagnosisResultImplCopyWith(
    _$DiagnosisResultImpl value,
    $Res Function(_$DiagnosisResultImpl) then,
  ) = __$$DiagnosisResultImplCopyWithImpl<$Res>;
  @override
  @useResult
  $Res call({String name, String result, DateTime createdAt});
}

/// @nodoc
class __$$DiagnosisResultImplCopyWithImpl<$Res>
    extends _$DiagnosisResultCopyWithImpl<$Res, _$DiagnosisResultImpl>
    implements _$$DiagnosisResultImplCopyWith<$Res> {
  __$$DiagnosisResultImplCopyWithImpl(
    _$DiagnosisResultImpl _value,
    $Res Function(_$DiagnosisResultImpl) _then,
  ) : super(_value, _then);

  /// Create a copy of DiagnosisResult
  /// with the given fields replaced by the non-null parameter values.
  @pragma('vm:prefer-inline')
  @override
  $Res call({
    Object? name = null,
    Object? result = null,
    Object? createdAt = null,
  }) {
    return _then(
      _$DiagnosisResultImpl(
        name:
            null == name
                ? _value.name
                : name // ignore: cast_nullable_to_non_nullable
                    as String,
        result:
            null == result
                ? _value.result
                : result // ignore: cast_nullable_to_non_nullable
                    as String,
        createdAt:
            null == createdAt
                ? _value.createdAt
                : createdAt // ignore: cast_nullable_to_non_nullable
                    as DateTime,
      ),
    );
  }
}

/// @nodoc
@JsonSerializable()
class _$DiagnosisResultImpl implements _DiagnosisResult {
  const _$DiagnosisResultImpl({
    required this.name,
    required this.result,
    required this.createdAt,
  });

  factory _$DiagnosisResultImpl.fromJson(Map<String, dynamic> json) =>
      _$$DiagnosisResultImplFromJson(json);

  @override
  final String name;
  // 診断した名前
  @override
  final String result;
  // 前世のジョーク診断結果
  @override
  final DateTime createdAt;

  @override
  String toString() {
    return 'DiagnosisResult(name: $name, result: $result, createdAt: $createdAt)';
  }

  @override
  bool operator ==(Object other) {
    return identical(this, other) ||
        (other.runtimeType == runtimeType &&
            other is _$DiagnosisResultImpl &&
            (identical(other.name, name) || other.name == name) &&
            (identical(other.result, result) || other.result == result) &&
            (identical(other.createdAt, createdAt) ||
                other.createdAt == createdAt));
  }

  @JsonKey(includeFromJson: false, includeToJson: false)
  @override
  int get hashCode => Object.hash(runtimeType, name, result, createdAt);

  /// Create a copy of DiagnosisResult
  /// with the given fields replaced by the non-null parameter values.
  @JsonKey(includeFromJson: false, includeToJson: false)
  @override
  @pragma('vm:prefer-inline')
  _$$DiagnosisResultImplCopyWith<_$DiagnosisResultImpl> get copyWith =>
      __$$DiagnosisResultImplCopyWithImpl<_$DiagnosisResultImpl>(
        this,
        _$identity,
      );

  @override
  Map<String, dynamic> toJson() {
    return _$$DiagnosisResultImplToJson(this);
  }
}

abstract class _DiagnosisResult implements DiagnosisResult {
  const factory _DiagnosisResult({
    required final String name,
    required final String result,
    required final DateTime createdAt,
  }) = _$DiagnosisResultImpl;

  factory _DiagnosisResult.fromJson(Map<String, dynamic> json) =
      _$DiagnosisResultImpl.fromJson;

  @override
  String get name; // 診断した名前
  @override
  String get result; // 前世のジョーク診断結果
  @override
  DateTime get createdAt;

  /// Create a copy of DiagnosisResult
  /// with the given fields replaced by the non-null parameter values.
  @override
  @JsonKey(includeFromJson: false, includeToJson: false)
  _$$DiagnosisResultImplCopyWith<_$DiagnosisResultImpl> get copyWith =>
      throw _privateConstructorUsedError;
}

lib/features/diagnosis/model/diagnosis_result.g.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'diagnosis_result.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

_$DiagnosisResultImpl _$$DiagnosisResultImplFromJson(
  Map<String, dynamic> json,
) => _$DiagnosisResultImpl(
  name: json['name'] as String,
  result: json['result'] as String,
  createdAt: DateTime.parse(json['createdAt'] as String),
);

Map<String, dynamic> _$$DiagnosisResultImplToJson(
  _$DiagnosisResultImpl instance,
) => <String, dynamic>{
  'name': instance.name,
  'result': instance.result,
  'createdAt': instance.createdAt.toIso8601String(),
};

lib/features/diagnosis/provider/diagnosis_provider.dart

import 'dart:math';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:joke_diagnosis_app/features/diagnosis/model/diagnosis_result.dart';
import '../model/diagnosis_result.dart';

final diagnosisProvider =
    AsyncNotifierProvider<DiagnosisNotifier, DiagnosisResult>(
      DiagnosisNotifier.new,
    );

class DiagnosisNotifier extends AsyncNotifier<DiagnosisResult> {
  final _jokes = [
    "あなたの前世はジャガイモです。",
    "江戸時代の落語家でした。",
    "ピラミッドの石を1個だけ運んだ人です。",
    "未来から来たネコ型AIでした。",
    "あなたはインド人の王でした名前はクマール",
  ];

  @override
  Future<DiagnosisResult> build() async {
    await Future.delayed(const Duration(seconds: 2)); // 擬似API待ち時間
    final name = ref.read(userNameProvider);
    final joke = _jokes[Random().nextInt(_jokes.length)];
    return DiagnosisResult(name: name, result: joke, createdAt: DateTime.now());
  }
}

// 名前を保持するProvider（StateNotifier）
final userNameProvider = StateProvider<String>((ref) => "");

AsyncNotifierProvider（非同期ロジックを持つProvider）

final diagnosisProvider =
    AsyncNotifierProvider<DiagnosisNotifier, DiagnosisResult>(
      DiagnosisNotifier.new,
    );

DiagnosisNotifier クラスの非同期処理を管理するためのプロバイダ
UI側では ref.watch(diagnosisProvider) で状態を監視できる
非同期状態（loading / data / error）は .when() でUIに反映できる

class DiagnosisNotifier extends AsyncNotifier<DiagnosisResult> {

AsyncNotifier を継承したクラスでは build() メソッドが初期化時に自動実行
非同期処理（今回なら診断ロジック）を build() の中で書ける

Future<DiagnosisResult> build() async {
  await Future.delayed(const Duration(seconds: 2));
  final name = ref.read(userNameProvider);
  ...
}

この build() の中で ref.read() を使って他のProvider（ここでは userNameProvider）の値を参照できる

StateProvider（ユーザー名の保持）

final userNameProvider = StateProvider<String>((ref) => "");

ユーザーが入力した名前を保持するためのシンプルな状態管理

[ユーザーが名前入力]
   ↓   ref.read(userNameProvider)
[診断スタートで diagnosisProvider を watch]
   ↓   AsyncNotifier の build() が呼ばれる
   ↓   2秒待つ → ランダムジョーク生成 → モデル返却
[UIは diagnosisProvider の .when() で表示]

AsyncNotifier	非同期ロジックを build() で管理できる
StateProvider	フォームや一時データに最適な軽量Provider
ref.read()	他のProviderから値を取得する方法
ref.watch()	UIで状態を監視して表示に反映する

lib/features/diagnosis/view/home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../provider/diagnosis_provider.dart';

class HomePage extends HookConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final nameController = useTextEditingController();
    final isValid = useState(false);

    useEffect(() {
      nameController.addListener(() {
        isValid.value = nameController.text.trim().isNotEmpty;
      });
      return null;
    }, [nameController]);

    return Scaffold(
      appBar: AppBar(title: const Text('ジョーク診断メーカー')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('あなたの名前を入力してください'),
            const SizedBox(height: 16),
            TextField(
              controller: nameController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: '例：たろう',
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed:
                  isValid.value
                      ? () {
                        ref.read(userNameProvider.notifier).state =
                            nameController.text.trim();
                        context.push('/loading');
                      }
                      : null,
              child: const Text('診断スタート'),
            ),
          ],
        ),
      ),
    );
  }
}

HookConsumerWidget（flutter_hooks + hooks_riverpod）

class HomePage extends HookConsumerWidget

flutter_hooks の HookWidget に、hooks_riverpod の ConsumerWidget を合体させたやつ
ref.watch() や ref.read()（Riverpod）と useState(), useEffect()（Hooks）を同時に使える便利なWidget

useTextEditingController()（Hooks）

final nameController = useTextEditingController();

普通は TextEditingController を自前で dispose() する必要あり
Hooksを使うと、自動でライフサイクル管理してくれる

useState(false)（Hooks）

final isValid = useState(false);

Flutterの setState() を使わずに、UIの状態（ここでは「名前が空かどうか」）を保持
Hooksでは isValid.value を使って読み書きできる

useEffect(() { ... })（Hooks）

useEffect(() {
  nameController.addListener(() {
    isValid.value = nameController.text.trim().isNotEmpty;
  });
  return null;
}, [nameController]);

Hooksでの「副作用」処理（addListener()）を書く場所
初回のみリスナー登録をして、名前が入力されたら isValid を更新

ref.read(userNameProvider.notifier).state = xxx（Riverpod）

ref.read(userNameProvider.notifier).state =
  nameController.text.trim();

context.push('/loading')（GoRouter）

context.push('/loading');

GoRouter を使って次の画面に遷移する処理
/loading というパスに設定された画面（例：LoadingPage）へ遷移

[ユーザーが名前入力]
   ↓  nameController に反映
[Hooksで入力状態監視 → ボタン有効化]
   ↓
[診断スタートボタン]
   ↓
ref.read(userNameProvider) で名前保存
   ↓
GoRouterで /loading に遷移

flutter_hooks useState / useEffect / useTextEditingController UI状態を軽く、見通し良く
Riverpod userNameProvider の状態保存グローバル状態の共有
GoRouter context.push() モダンな画面遷移の実現

lib/features/diagnosis/view/loading_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../provider/diagnosis_provider.dart';

class LoadingPage extends ConsumerWidget {
  const LoadingPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen(diagnosisProvider, (previous, next) {
      next.whenData((_) {
        context.go('/result');
      });
    });

    // 初回のみ診断開始
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ref.read(diagnosisProvider.notifier).build();
    });

    return Scaffold(
      body: Center(
        child:
            const Text('診断中…🧠')
                .animate()
                .fadeIn(duration: 500.ms)
                .scale(duration: 800.ms)
                .then(delay: 300.ms)
                .shake(),
      ),
    );
  }
}

ConsumerWidget（Riverpod）

class LoadingPage extends ConsumerWidget

hooks_riverpod の ConsumerWidget によって WidgetRef ref が使える
状態監視（ref.watch, ref.listen）や状態の更新（ref.read(...)）が可能

ref.listen(diagnosisProvider, (previous, next) { ... })（非同期状態の監視）

ref.listen(diagnosisProvider, (previous, next) {
  next.whenData((_) {
    context.go('/result');
  });
});

diagnosisProvider の状態変化を監視して、「データが取得できたら /result に画面遷移する」ロジック
.whenData(...) を使うことで非同期状態の data（成功）だけをトリガーにできる

ref.read(diagnosisProvider.notifier).build();（診断処理の明示的な呼び出し）

WidgetsBinding.instance.addPostFrameCallback((_) {
  ref.read(diagnosisProvider.notifier).build();
});

build() は AsyncNotifier の初期処理だが、このように手動で明示的に呼び出すこともできる
画面が表示された「直後に処理を実行」したいときに addPostFrameCallback を使うのがポイント

アニメーション（flutter_animate）

const Text('診断中…🧠')
  .animate()
  .fadeIn(duration: 500.ms)
  .scale(duration: 800.ms)
  .then(delay: 300.ms)
  .shake()

flutter_animate によるアニメーションチェーン（→ → → で繋がる）
.animate() から始まり、 .fadeIn(), .scale(), .shake() などを組み合わせて動きのある表示に

[画面が表示されたら（post frame）]
   ↓
diagnosisProvider.build() を実行（診断スタート）
   ↓
非同期でジョーク取得中（2秒）
   ↓
取得完了 → ref.listen が反応 → '/result' に遷移
   ↓
その間、Text("診断中…🧠") がアニメーションし続ける

ref.listen	プロバイダーの状態をリアルタイム監視	状態変化で画面遷移したいときに使える
addPostFrameCallback	ビルド後に一度だけ処理を走らせる	初回だけ診断開始するため
flutter_animate	UIに動きをつける	ユーザー体験をリッチにするため

lib/features/diagnosis/view/result_page.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../provider/diagnosis_provider.dart';
import 'package:intl/intl.dart';

class ResultPage extends ConsumerWidget {
  const ResultPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final result = ref.watch(diagnosisProvider).value;

    if (result == null) {
      return const Scaffold(body: Center(child: Text('診断結果がありません')));
    }

    final formattedDate = DateFormat(
      'yyyy年MM月dd日 HH:mm',
    ).format(result.createdAt);

    return Scaffold(
      appBar: AppBar(title: const Text('診断結果')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('名前：${result.name}', style: const TextStyle(fontSize: 20)),
            const SizedBox(height: 16),
            Text('前世：${result.result}', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            Text('診断日：$formattedDate'),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: () => context.go('/'),
              child: const Text('もう一度診断する'),
            ),
          ],
        ),
      ),
    );
  }
}

ConsumerWidget（hooks_riverpod）

class ResultPage extends ConsumerWidget

Riverpodの状態を ref.watch() で監視できるウィジェット
Hooksは使っていないけど、シンプルな画面なら ConsumerWidget だけで十分

ref.watch(diagnosisProvider).value

final result = ref.watch(diagnosisProvider).value;

AsyncNotifierProvider の AsyncValue<DiagnosisResult> から .value を使って非同期結果（dataのみ）を取得
すでにデータが取得済みのタイミングで ResultPage に遷移する前提なので .value でOK！

intl パッケージでの日時フォーマット

final formattedDate = DateFormat(
  'yyyy年MM月dd日 HH:mm',
).format(result.createdAt);

context.go('/')（GoRouter）

onPressed: () => context.go('/'),

GoRouterを使った画面遷移（＝トップ画面に戻る）
context.go() は履歴を残さずに遷移する（スタックをリセット）

[diagnosisProvider から診断結果を取得]
   ↓
nullなら「診断結果がありません」
   ↓
結果を UI に表示（名前 / 前世 / 診断日）
   ↓
「もう一度診断する」→ context.go('/') でHomeへ

Riverpod	ref.watch(diagnosisProvider).value	非同期Providerから値を取得
intl	DateFormat(...)	DateTimeの日本語フォーマット表示
GoRouter	context.go('/')	トップへ戻る遷移（履歴なし）

解消するべきバグ
↓
二回目の診断ができない
ひらがな以外も認識させる

その他
ZennとGitの連携を試す

※編集中

Discussion