イベントモーダルを作ってみよう | 人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション | Flutterアプリケーション開発概論

忙しい方はここだけ見て

この章で見る大事な場所は、ここです。

Future<void> _showLifeEventModal({
  required String title,
  required String categoryLabel,
  required String subtitle,
  required String description,
  required IconData icon,
  required Color accentColor,
  int? cashChange,
}) async {
  setState(() {
    _phase = GamePhase.showingModal;
  });

  await showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text(title),
        content: Text(description),
      );
    },
  );
}

イベントモーダルは、簡単に言うと「画面の上に出る説明カード」です。

給料マスに止まった
↓
給料の説明モーダルを出す

税金マスに止まった
↓
支払いの説明モーダルを出す

イベントマスに止まった
↓
ランダムイベントの説明モーダルを出す

まずは、こう覚えればOKです。

_showLifeEventModal()
=
イベント内容を画面に分かりやすく表示する関数

この章でやること

この章では、給料・税金・イベント・通行料などを、画面に分かりやすく表示する「イベントモーダル」を見ていきます。

ゲームでは、何かが起きたときに、すぐ画面で伝えることが大事です。

何が起きたのか
誰に起きたのか
お金が増えたのか
お金が減ったのか
次に何をすればよいのか

これを伝える役割が、イベントモーダルです。

今日のゴール

この章のゴールは、次の3つです。

1. _showLifeEventModal() がイベント表示用の関数だと分かる
2. showDialog() で画面上にモーダルを出していると分かる
3. title・description・cashChange を変えると表示内容が変わると分かる

難しいUIの細かい仕組みは、全部覚えなくて大丈夫です。

まずは「モーダルはイベント説明カード」と考えましょう。

Step 1：イベントモーダルとは？

イベントモーダルとは、画面の上に重なって表示される案内画面です。

例えば、ゲーム中にこのような内容を表示します。

初任給
+500

仕事の成果として給料を受け取りました。

または、

税金・支払い
-250

収入が増えると、税金や固定費も発生します。

プレイヤーに「今、何が起きたか」を伝えるための画面です。

Step 2：_showLifeEventModal()を探す

lib/main.dart を開きます。

検索で、次の文字を探してください。

_showLifeEventModal

このような関数があります。

Future<void> _showLifeEventModal({
  required String title,
  required String categoryLabel,
  required String subtitle,
  required String description,
  required IconData icon,
  required Color accentColor,
  int? cashChange,
}) async {
  setState(() {
    _phase = GamePhase.showingModal;
  });

  await showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text(title),
        content: Text(description),
      );
    },
  );
}

実際のコードでは、もっとデザインが入っています。

ただし、中心はこの部分です。

await showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(...);
  },
);

Step 3：showDialog()とは？

showDialog() は、Flutterでモーダルを表示するための関数です。

showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(...);
  },
);

簡単に言うと、

画面の上に、別の小さな画面を出す

ためのものです。

確認画面、警告画面、イベント説明画面などでよく使います。

Step 4：AlertDialogとは？

AlertDialog は、Flutterで用意されているダイアログ用の部品です。

AlertDialog(
  title: Text(title),
  content: Text(description),
)

意味はこうです。

項目	意味
`title`	上に表示するタイトル
`content`	中に表示する本文

今回のゲームでは、イベントの説明を見せるために使っています。

Step 5：引数を確認しよう

_showLifeEventModal() には、いろいろな情報を渡しています。

required String title,
required String categoryLabel,
required String subtitle,
required String description,
required IconData icon,
required Color accentColor,
int? cashChange,

意味はこちらです。

引数	意味
`title`	イベント名
`categoryLabel`	イベントの種類
`subtitle`	年齢やステージ
`description`	説明文
`icon`	表示するアイコン
`accentColor`	強調色
`cashChange`	お金の増減

全部を一気に覚えなくてOKです。

最初は、title、description、cashChange を見れば大丈夫です。

Step 6：給料マスでの使い方

給料マスでは、イベントモーダルをこのように呼び出しています。

await _showLifeEventModal(
  title: tile.label,
  categoryLabel: 'PAYDAY',
  subtitle: '${tile.age}歳｜${tile.stage}',
  description: tile.description,
  icon: Icons.payments,
  accentColor: AppColors.green,
  cashChange: 500,
);

意味はこうです。

タイトル：マスの名前
種類：PAYDAY
説明文：マスの説明
アイコン：支払いアイコン
色：緑
お金：+500

給料なので、緑色でプラス表示にしています。

Step 7：税金マスでの使い方

税金マスでは、こう使っています。

await _showLifeEventModal(
  title: tile.label,
  categoryLabel: 'TAX',
  subtitle: '${tile.age}歳｜${tile.stage}',
  description: tile.description,
  icon: Icons.receipt_long,
  accentColor: AppColors.red,
  cashChange: -250,
);

意味はこうです。

タイトル：税金・支払い
種類：TAX
説明文：税金や固定費の説明
アイコン：領収書アイコン
色：赤
お金：-250

お金が減るので、cashChange はマイナスです。

Step 8：イベントマスでの使い方

ランダムイベントでは、イベントデータを使って表示しています。

await _showLifeEventModal(
  title: event.title,
  categoryLabel: _eventCategoryLabel(event.category),
  subtitle: '${tile.age}歳｜${tile.stage}',
  description: event.description,
  icon: _eventCategoryIcon(event.category),
  accentColor: eventColor,
  cashChange: event.cashChange,
);

ここでは、イベントごとに表示内容が変わります。

event.title
↓
イベント名

event.description
↓
イベント説明文

event.cashChange
↓
お金の増減

つまり、_createEventPool() にイベントを追加すると、モーダルの内容も変わります。

Step 9：cashChangeはあってもなくてもよい

cashChange は、このように書かれています。

int? cashChange,

? がついています。

これは、

あってもよい
なくてもよい

という意味です。

給料や税金のように、お金が変わる場合は使います。

cashChange: 500,

通常マスのように、お金が変わらない場合は、書かなくてもOKです。

Step 10：cashChangeの表示を考える

モーダルの中では、cashChange がある場合だけ金額を表示できます。

イメージとしては、こうです。

if (cashChange != null) {
  Text(
    cashChange >= 0 ? '+$cashChange' : '$cashChange',
  );
}

意味はこうです。

cashChange がある
↓
金額を表示する

0以上
↓
+500 のように表示する

0より小さい
↓
-250 のように表示する

これで、収入と出費が分かりやすくなります。

Step 11：_phaseをshowingModalにする理由

モーダルを表示する前に、この処理があります。

setState(() {
  _phase = GamePhase.showingModal;
});

これは、

今はイベント画面を表示中です

という状態にするためです。

この状態にしておくと、モーダル表示中に何度もサイコロを押せないようにできます。

Step 12：モーダルを閉じたあとは？

モーダルを閉じたあとは、元の処理に戻ります。

例えば、給料マスではこの流れです。

イベントモーダルを表示
↓
ユーザーが閉じる
↓
お金を増やす
↓
ログを追加
↓
次のプレイヤーへ

コードでは、このようになっています。

await _showLifeEventModal(...);

_addCashToCurrentPlayer(500);
_addLog('...');
_moveToNextPlayer();

await があるので、モーダルを閉じるまで次の処理に進みません。

Step 13：awaitの役割

ここで大事なのが、await です。

await _showLifeEventModal(...);

これは、

モーダルが閉じるまで待つ

という意味です。

もし await がないと、モーダルを表示しながら、次の処理もすぐ進んでしまう可能性があります。

初心者のうちは、

await = 終わるまで待つ

と覚えればOKです。

Step 14：表示文章を変えてみよう

まずは、給料マスのタイトルや説明を変えるのが簡単です。

_createTiles() の中にある給料マスを探します。

BoardTile(
  index: 4,
  age: 25,
  stage: '初任給・収入期',
  label: '初任給',
  description: '仕事の成果として給料を受け取ります。現金が増え、次の選択肢が広がります。',
  type: TileType.payday,
),

例えば、こう変えます。

label: 'はじめての給料',
description: '初めての給料を受け取りました。少しだけ大人になった気がします。',

すると、モーダルの表示内容も変わります。

Step 15：色を変えてみよう

モーダルの強調色は、accentColor で変えられます。

給料マスは、もともと緑です。

accentColor: AppColors.green,

例えば、金色にしたい場合です。

accentColor: AppColors.gold,

ただし、色を変えすぎると意味が分かりにくくなることがあります。

おすすめはこのような使い分けです。

内容	色
収入	`AppColors.green`
出費・税金	`AppColors.red`
物件	`AppColors.gold`
通行料	`AppColors.orange`
ゴール	`AppColors.red`

色には意味を持たせると、画面が分かりやすくなります。

触ってみよう

今回は、給料マスの表示文を変えてみましょう。

変更前です。

label: '初任給',
description: '仕事の成果として給料を受け取ります。現金が増え、次の選択肢が広がります。',

変更後です。

label: 'はじめての給料',
description: '初めての給料を受け取りました。使い道を考えるだけで、少しワクワクします。',

保存して、給料マスに止まったときのモーダル表示を確認します。

画面に「はじめての給料」と表示されたら成功です。

もう1つ触ってみよう

税金マスの説明も少しやさしくしてみます。

変更前です。

label: '税金・支払い',
description: '収入が増えると、税金や固定費も発生します。現金が減ります。',

変更後です。

label: '生活費の支払い',
description: '家賃や光熱費など、生活に必要なお金を支払いました。',

これだけでも、ゲームの雰囲気が少しやわらかくなります。

よくあるエラーと直し方

1. 文字の `'` を消してしまった

悪い例です。

title: 初任給,

正しくはこちらです。

title: '初任給',

文字は ' で囲みます。

2. カンマを消してしまった

悪い例です。

title: tile.label
categoryLabel: 'PAYDAY',

正しくはこちらです。

title: tile.label,
categoryLabel: 'PAYDAY',

各行の最後にカンマを残します。

3. cashChangeを文字にしてしまった

悪い例です。

cashChange: '500',

正しくはこちらです。

cashChange: 500,

数字は ' で囲みません。

4. マイナスを忘れてしまった

税金や出費は、マイナスです。

悪い例です。

cashChange: 250,

正しくはこちらです。

cashChange: -250,

マイナスを忘れると、出費なのに収入のように表示されます。

5. awaitを消してしまった

悪い例です。

_showLifeEventModal(...);
_addCashToCurrentPlayer(500);

正しくはこちらです。

await _showLifeEventModal(...);
_addCashToCurrentPlayer(500);

await をつけることで、モーダルが閉じるまで次の処理を待てます。

この章で覚えること

この章で覚えることは、3つだけです。

1. _showLifeEventModal() はイベント表示用の関数
2. showDialog() でモーダルを表示している
3. title・description・cashChange を変えると表示内容が変わる

まずはこれだけで大丈夫です。

やる気を維持するコツ

イベントモーダルは、ゲームの「伝え方」を決める部分です。

処理が正しくても、画面に分かりやすく出なければ、ユーザーは何が起きたか分かりません。

逆に、モーダルが分かりやすいと、ゲーム体験が一気に良くなります。

何が起きたか分かる
↓
納得できる
↓
次も遊びたくなる

まずは文章を変えるだけでOKです。

小さな表現の変更でも、ゲームの印象はかなり変わります。

チェックリスト

□ _showLifeEventModal() を見つけた
□ showDialog() がモーダル表示だと分かった
□ AlertDialog が表示カードだと分かった
□ title がイベント名だと分かった
□ description が説明文だと分かった
□ cashChange が金額表示だと分かった
□ await が閉じるまで待つ意味だと分かった
□ 給料マスの表示文を変更した
□ 税金マスの表示文を変更した
□ 保存して画面で確認した

まとめ

この章では、イベントモーダルを作る仕組みを確認しました。

イベントモーダルは、_showLifeEventModal() で表示しています。

中では showDialog() を使って、画面の上にイベント説明用のカードを出しています。

title、description、cashChange を変えることで、給料・税金・イベント・通行料などを分かりやすく表示できます。

次の章では、タイムラインUIとアニメーションを見ながら、人生ゲームの見た目を作る仕組みを理解していきます。

忙しい方はここだけ見て

この章で見る大事な場所は、ここです。

Future<void> _showLifeEventModal({
  required String title,
  required String categoryLabel,
  required String subtitle,
  required String description,
  required IconData icon,
  required Color accentColor,
  int? cashChange,
}) async {
  setState(() {
    _phase = GamePhase.showingModal;
  });

  await showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text(title),
        content: Text(description),
      );
    },
  );
}

イベントモーダルは、簡単に言うと「画面の上に出る説明カード」です。

給料マスに止まった
↓
給料の説明モーダルを出す

税金マスに止まった
↓
支払いの説明モーダルを出す

イベントマスに止まった
↓
ランダムイベントの説明モーダルを出す

まずは、こう覚えればOKです。

_showLifeEventModal()
=
イベント内容を画面に分かりやすく表示する関数

この章でやること

この章では、給料・税金・イベント・通行料などを、画面に分かりやすく表示する「イベントモーダル」を見ていきます。

ゲームでは、何かが起きたときに、すぐ画面で伝えることが大事です。

何が起きたのか
誰に起きたのか
お金が増えたのか
お金が減ったのか
次に何をすればよいのか

これを伝える役割が、イベントモーダルです。

今日のゴール

この章のゴールは、次の3つです。

1. _showLifeEventModal() がイベント表示用の関数だと分かる
2. showDialog() で画面上にモーダルを出していると分かる
3. title・description・cashChange を変えると表示内容が変わると分かる

難しいUIの細かい仕組みは、全部覚えなくて大丈夫です。

まずは「モーダルはイベント説明カード」と考えましょう。

Step 1：イベントモーダルとは？

イベントモーダルとは、画面の上に重なって表示される案内画面です。

例えば、ゲーム中にこのような内容を表示します。

初任給
+500

仕事の成果として給料を受け取りました。

または、

税金・支払い
-250

収入が増えると、税金や固定費も発生します。

プレイヤーに「今、何が起きたか」を伝えるための画面です。

Step 2：_showLifeEventModal()を探す

lib/main.dart を開きます。

検索で、次の文字を探してください。

_showLifeEventModal

このような関数があります。

Future<void> _showLifeEventModal({
  required String title,
  required String categoryLabel,
  required String subtitle,
  required String description,
  required IconData icon,
  required Color accentColor,
  int? cashChange,
}) async {
  setState(() {
    _phase = GamePhase.showingModal;
  });

  await showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text(title),
        content: Text(description),
      );
    },
  );
}

実際のコードでは、もっとデザインが入っています。

ただし、中心はこの部分です。

await showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(...);
  },
);

Step 3：showDialog()とは？

showDialog() は、Flutterでモーダルを表示するための関数です。

showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(...);
  },
);

簡単に言うと、

画面の上に、別の小さな画面を出す

ためのものです。

確認画面、警告画面、イベント説明画面などでよく使います。

Step 4：AlertDialogとは？

AlertDialog は、Flutterで用意されているダイアログ用の部品です。

AlertDialog(
  title: Text(title),
  content: Text(description),
)

意味はこうです。

項目	意味
`title`	上に表示するタイトル
`content`	中に表示する本文

今回のゲームでは、イベントの説明を見せるために使っています。

Step 5：引数を確認しよう

_showLifeEventModal() には、いろいろな情報を渡しています。

required String title,
required String categoryLabel,
required String subtitle,
required String description,
required IconData icon,
required Color accentColor,
int? cashChange,

意味はこちらです。

引数	意味
`title`	イベント名
`categoryLabel`	イベントの種類
`subtitle`	年齢やステージ
`description`	説明文
`icon`	表示するアイコン
`accentColor`	強調色
`cashChange`	お金の増減

全部を一気に覚えなくてOKです。

最初は、title、description、cashChange を見れば大丈夫です。

Step 6：給料マスでの使い方

給料マスでは、イベントモーダルをこのように呼び出しています。

await _showLifeEventModal(
  title: tile.label,
  categoryLabel: 'PAYDAY',
  subtitle: '${tile.age}歳｜${tile.stage}',
  description: tile.description,
  icon: Icons.payments,
  accentColor: AppColors.green,
  cashChange: 500,
);

意味はこうです。

タイトル：マスの名前
種類：PAYDAY
説明文：マスの説明
アイコン：支払いアイコン
色：緑
お金：+500

給料なので、緑色でプラス表示にしています。

Step 7：税金マスでの使い方

税金マスでは、こう使っています。

await _showLifeEventModal(
  title: tile.label,
  categoryLabel: 'TAX',
  subtitle: '${tile.age}歳｜${tile.stage}',
  description: tile.description,
  icon: Icons.receipt_long,
  accentColor: AppColors.red,
  cashChange: -250,
);

意味はこうです。

タイトル：税金・支払い
種類：TAX
説明文：税金や固定費の説明
アイコン：領収書アイコン
色：赤
お金：-250

お金が減るので、cashChange はマイナスです。

Step 8：イベントマスでの使い方

ランダムイベントでは、イベントデータを使って表示しています。

await _showLifeEventModal(
  title: event.title,
  categoryLabel: _eventCategoryLabel(event.category),
  subtitle: '${tile.age}歳｜${tile.stage}',
  description: event.description,
  icon: _eventCategoryIcon(event.category),
  accentColor: eventColor,
  cashChange: event.cashChange,
);

ここでは、イベントごとに表示内容が変わります。

event.title
↓
イベント名

event.description
↓
イベント説明文

event.cashChange
↓
お金の増減

つまり、_createEventPool() にイベントを追加すると、モーダルの内容も変わります。

Step 9：cashChangeはあってもなくてもよい

cashChange は、このように書かれています。

int? cashChange,

? がついています。

これは、

あってもよい
なくてもよい

という意味です。

給料や税金のように、お金が変わる場合は使います。

cashChange: 500,

通常マスのように、お金が変わらない場合は、書かなくてもOKです。

Step 10：cashChangeの表示を考える

モーダルの中では、cashChange がある場合だけ金額を表示できます。

イメージとしては、こうです。

if (cashChange != null) {
  Text(
    cashChange >= 0 ? '+$cashChange' : '$cashChange',
  );
}

意味はこうです。

cashChange がある
↓
金額を表示する

0以上
↓
+500 のように表示する

0より小さい
↓
-250 のように表示する

これで、収入と出費が分かりやすくなります。

Step 11：_phaseをshowingModalにする理由

モーダルを表示する前に、この処理があります。

setState(() {
  _phase = GamePhase.showingModal;
});

これは、

今はイベント画面を表示中です

という状態にするためです。

この状態にしておくと、モーダル表示中に何度もサイコロを押せないようにできます。

Step 12：モーダルを閉じたあとは？

モーダルを閉じたあとは、元の処理に戻ります。

例えば、給料マスではこの流れです。

イベントモーダルを表示
↓
ユーザーが閉じる
↓
お金を増やす
↓
ログを追加
↓
次のプレイヤーへ

コードでは、このようになっています。

await _showLifeEventModal(...);

_addCashToCurrentPlayer(500);
_addLog('...');
_moveToNextPlayer();

await があるので、モーダルを閉じるまで次の処理に進みません。

Step 13：awaitの役割

ここで大事なのが、await です。

await _showLifeEventModal(...);

これは、

モーダルが閉じるまで待つ

という意味です。

もし await がないと、モーダルを表示しながら、次の処理もすぐ進んでしまう可能性があります。

初心者のうちは、

await = 終わるまで待つ

と覚えればOKです。

Step 14：表示文章を変えてみよう

まずは、給料マスのタイトルや説明を変えるのが簡単です。

_createTiles() の中にある給料マスを探します。

BoardTile(
  index: 4,
  age: 25,
  stage: '初任給・収入期',
  label: '初任給',
  description: '仕事の成果として給料を受け取ります。現金が増え、次の選択肢が広がります。',
  type: TileType.payday,
),

例えば、こう変えます。

label: 'はじめての給料',
description: '初めての給料を受け取りました。少しだけ大人になった気がします。',

すると、モーダルの表示内容も変わります。

Step 15：色を変えてみよう

モーダルの強調色は、accentColor で変えられます。

給料マスは、もともと緑です。

accentColor: AppColors.green,

例えば、金色にしたい場合です。

accentColor: AppColors.gold,

ただし、色を変えすぎると意味が分かりにくくなることがあります。

おすすめはこのような使い分けです。

内容	色
収入	`AppColors.green`
出費・税金	`AppColors.red`
物件	`AppColors.gold`
通行料	`AppColors.orange`
ゴール	`AppColors.red`

色には意味を持たせると、画面が分かりやすくなります。

触ってみよう

今回は、給料マスの表示文を変えてみましょう。

変更前です。

label: '初任給',
description: '仕事の成果として給料を受け取ります。現金が増え、次の選択肢が広がります。',

変更後です。

label: 'はじめての給料',
description: '初めての給料を受け取りました。使い道を考えるだけで、少しワクワクします。',

保存して、給料マスに止まったときのモーダル表示を確認します。

画面に「はじめての給料」と表示されたら成功です。

もう1つ触ってみよう

税金マスの説明も少しやさしくしてみます。

変更前です。

label: '税金・支払い',
description: '収入が増えると、税金や固定費も発生します。現金が減ります。',

変更後です。

label: '生活費の支払い',
description: '家賃や光熱費など、生活に必要なお金を支払いました。',

これだけでも、ゲームの雰囲気が少しやわらかくなります。

よくあるエラーと直し方

1. 文字の `'` を消してしまった

悪い例です。

title: 初任給,

正しくはこちらです。

title: '初任給',

文字は ' で囲みます。

2. カンマを消してしまった

悪い例です。

title: tile.label
categoryLabel: 'PAYDAY',

正しくはこちらです。

title: tile.label,
categoryLabel: 'PAYDAY',

各行の最後にカンマを残します。

3. cashChangeを文字にしてしまった

悪い例です。

cashChange: '500',

正しくはこちらです。

cashChange: 500,

数字は ' で囲みません。

4. マイナスを忘れてしまった

税金や出費は、マイナスです。

悪い例です。

cashChange: 250,

正しくはこちらです。

cashChange: -250,

マイナスを忘れると、出費なのに収入のように表示されます。

5. awaitを消してしまった

悪い例です。

_showLifeEventModal(...);
_addCashToCurrentPlayer(500);

正しくはこちらです。

await _showLifeEventModal(...);
_addCashToCurrentPlayer(500);

await をつけることで、モーダルが閉じるまで次の処理を待てます。

この章で覚えること

この章で覚えることは、3つだけです。

1. _showLifeEventModal() はイベント表示用の関数
2. showDialog() でモーダルを表示している
3. title・description・cashChange を変えると表示内容が変わる

まずはこれだけで大丈夫です。

やる気を維持するコツ

イベントモーダルは、ゲームの「伝え方」を決める部分です。

処理が正しくても、画面に分かりやすく出なければ、ユーザーは何が起きたか分かりません。

逆に、モーダルが分かりやすいと、ゲーム体験が一気に良くなります。

何が起きたか分かる
↓
納得できる
↓
次も遊びたくなる

まずは文章を変えるだけでOKです。

小さな表現の変更でも、ゲームの印象はかなり変わります。

チェックリスト

□ _showLifeEventModal() を見つけた
□ showDialog() がモーダル表示だと分かった
□ AlertDialog が表示カードだと分かった
□ title がイベント名だと分かった
□ description が説明文だと分かった
□ cashChange が金額表示だと分かった
□ await が閉じるまで待つ意味だと分かった
□ 給料マスの表示文を変更した
□ 税金マスの表示文を変更した
□ 保存して画面で確認した

まとめ

この章では、イベントモーダルを作る仕組みを確認しました。

イベントモーダルは、_showLifeEventModal() で表示しています。

中では showDialog() を使って、画面の上にイベント説明用のカードを出しています。

title、description、cashChange を変えることで、給料・税金・イベント・通行料などを分かりやすく表示できます。

次の章では、タイムラインUIとアニメーションを見ながら、人生ゲームの見た目を作る仕組みを理解していきます。