【Flutter】Riverpod+Freezedを使って絵合わせゲームを作ってみた（ソースコード公開）

はじめに

こんにちは、Flutterエンジニアのおまつです！
初めてFlutter開発のお仕事についてから、複数のアプリを3年間作り続けています！

今回は個人開発で作った「絵合わせゲーム」の紹介記事となります。
状態管理でRiverpod+Freezedを使ってフォルダ構成にも気を使ってみたので、個人的にはFlutter初心者卒業？くらいのレベル感はあると思っています。（たぶん...）

文末にGitHubのURLも公開しているので、良ければダウンロードしてみてください！！
参考にして別のアプリを作るなり、改造して良いすごい絵合わせゲームを作るなり自由です！

概要

アプリ概要

縦4×横3=12枚のカードから2枚をめくって、同じ絵を合わせる簡単な絵合わせゲームです。
6枚絵を揃えられたらゲームクリアとなります。
厳密には絵ではなく、私のスマホから選出した6枚の写真を使用しています！笑

開発環境・保証端末

2025/7/10リリースのFlutter環境を使用しています。

Flutter 3.32.6
Dart 3.8.1
DevTools 2.45.1

Pixel7、iPhone16の2端末で動作確認済みです。
※タブレットでは確認していないためUIが崩れている可能性あり

画面一覧

シンプルな3画面構成のアプリとなっています。

• スタート画面：アプリ起動時に初期表示される画面です。
• ゲーム画面　：実際に絵合わせゲームが出来る画面です。
• りれき画面　：今までのゲームプレイ回数、クリア回数を表示する画面です。

アプリのアピールポイント

• UIにアニメーションをモリモリ
• ローカルでデータを保持（SharedPreferences）
• アプリアイコンを変更
• 状態管理にRiverpod+Freezedを使用
• 画面遷移にGoRouterを使用

使用した主なパッケージ

• Riverpod+Freezedの状態管理に使用したパッケージ
  • flutter_riverpod
  • riverpod_annotation
  • riverpod_generator
  • freezed
  • freezed_annotation
  • build_runner
• それ以外のパッケージ
  • animated_background
    スタート画面の背景アニメーションに使用（絵がコロコロ回るやつ）
  • easy_animate
    スタート画面の「スタート」ボタンのアニメーションに使用（バウンスするやつ）
  • flutter_launcher_icons
    アプリアイコンの設定に使用
  • go_router
    画面遷移の処理に使用
  • google_fonts
    アプリ内で表示される文字のフォント固定に使用
  • shared_preferences
    履歴データをローカルで保持するために使用

使用させていただいた静止画・アニメーション画

• テキストロゴ・アイコン画像作成メーカー
  アプリアイコンに使用
• 文字画像作成機
  スタート画面のタイトルロゴに使用
• 時短だ(はてなブロック)
  ゲーム画面の裏カード画像に使用
• Booth(成功失敗APNG)
  ゲーム画面で2枚の画像が揃ったときに表示される成功/失敗のアニメーション画像に使用
• Booth(背景ウラにもたぶん使えるAPNG素材集)
  ゲーム画面、りれき画面の背景アニメーション画像に使用
• GIFSEC(congratulations-gifs)
  ゲーム画面でクリア時に表示されるアニメーション画像に使用

※ストアに上げるつもりはないため、個人利用の範囲で使用させていただいております。

アプリの詳細

フォルダ構成

UI実装部分は「Presentation」フォルダ配下、処理実装部分は「Domain」フォルダ配下に置いています。
プロバイダーはゲーム画面用とりれき画面用で2つ作成しました。

lib
├── Domain/
│   ├── common/
│   │   ├── assets.dart
│   │   ├── enum.dart
│   │   ├── router_settings.dart
│   │   ├── shared_preferences_key.dart
│   │   └── strings.dart
│   ├── game_provider/　　　　　　　// ゲーム画面の状態を管理するプロバイダー
│   │   ├── game_notifier.dart
│   │   ├── game_notifier.g.dart
│   │   ├── game_state.dart
│   │   └── game_state.freezed.dart
│   └── history_provider/　　　　　// りれき画面の状態を管理するプロバイダー
│       ├── history_notifier.dart
│       ├── history_notifier.g.dart
│       ├── history_state.dart
│       └── history_state.freezed.dart
├── Presentation/
│   ├── game_page.dart　　　// ゲーム画面のUI
│   ├── history_page.dart　　　// りれき画面のUI
│   └── start_page.dart　　　// スタート画面のUI
└── main.dart

スタート画面

アプリ起動時に初期表示される画面です。

• アニメーションをモリモリにしていますが、画像だと伝わらないのが悲しい...。
• それぞれボタン押下でゲーム画面、りれき画面に遷移します。
  

ゲーム画面

実際に絵合わせゲームを行う画面です。

• 12枚のはてなカードから2枚めくり、成功or失敗のエフェクトが表示されます。
• 成功すればカードは表向きのまま残り、失敗すればカードは裏向きに戻ります。
• 表向きのカードをタップすることで表示画像が前面に拡大表示されます。
• 全てのカードが一致すると、Congratulations!が表示されてタイトルに戻ります。
• カードに使用している写真は、全てプライベートで撮った写真を使用しています！！笑
  
  

りれき画面

今までのゲームプレイ回数、クリア回数を表示する画面です。

• それぞれシェアプリで管理している数値のため、アプリを終了しても数値は引き継がれます。
• プレイ回数はゲーム画面への遷移タイミングで加算しています。
• クリア回数はゲーム画面でCongratulations!が表示されたタイミングで加算しています。
  

まとめ

ゲームアプリの中で自分のプライベート画像を使ったりすることで、楽しく開発することが出来ました！
また何か作ったり、公開できる豆知識などあれば記事を投稿しようと思います！！
このアプリにも改善点だったり機能追加の余地がありすぎるので、備忘録として残しておきます。

• ゲーム画面のカード一致処理があまりにも酷い。もっとシンプルに出来るはず...。
• Firebase Cloud Firestoreを使って、クリア回数とか何かしらを全国ランキング形式で表示するのも楽しそう。
• カードの画像を埋め込みではなく、ユーザが登録できるようにしたら汎用性が高まりそう。
• ゲームなんだし、せっかくなら音も出したい。

みなさんも是非、ダウンロードしてみてください！！
https://github.com/koji-matsu/easy_picture_matching