必要なパッケージを確認しようは医療関係者向けだけの内容ですか。

医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。

AI初心者でも読めますか。

はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。

サムネイル画像は必ず表示されますか。

はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。

Flutterアプリケーション開発概論のほかの章も読めますか。

はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。

必要なパッケージを確認しよう | 人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション | Flutterアプリケーション開発概論・生成AIオンライン教材

項目	内容
教材名	Flutterアプリケーション開発概論
章	人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション
節	必要なパッケージを確認しよう
カテゴリ	Flutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
学習内容	生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

忙しい方向け

すでにアプリが動いている状態の方は次のページに進んでください。読む時間がない方は、まずここだけでOKです。pubspec.yaml に、最低限これが入っていれば動かせます。

dependencies:
  flutter:
    sdk: flutter
  timelines_plus: ^2.0.0

編集したら、ターミナルで実行します。

flutter pub get

そのあと起動します。

flutter run

画面に「人生ゲーム」「タイムライン版」「サイコロを振る」が表示されれば成功です。

この章でやること

この章では、Flutterアプリで使う「パッケージ」を確認します。

パッケージとは、アプリに便利な機能を追加するための部品です。

今回の人生ゲームでは、主にこのパッケージを使います。

timelines_plus

これは、人生のマスを縦のタイムラインとして表示するために使います。

今日のゴール

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

1. pubspec.yamlが何のファイルか分かる
2. timelines_plusが何のために必要か分かる
3. pubspec.yamlを編集したら flutter pub get が必要だと分かる

全部を覚えなくて大丈夫です。

まずは、

pubspec.yaml = 使う部品を書く場所

と覚えればOKです。

Step 1：pubspec.yamlを開く

Flutterプロジェクトの中にある、次のファイルを開きます。

pubspec.yaml

このファイルには、アプリの基本情報や使うパッケージを書きます。

例えば、こういう内容です。

アプリ名
説明文
バージョン
使うパッケージ
画像やフォントの設定

今回、大事なのは dependencies の部分です。

Step 2：今回使う最小構成

初心者の方は、まずこの形で進めればOKです。

name: life_game_mvp
description: A simple Life Game MVP using Flutter.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ^3.6.0

dependencies:
  flutter:
    sdk: flutter
  timelines_plus: ^2.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

この章では、難しい設定は増やしません。

まずは、人生ゲームを動かすことを優先します。

Step 3：dependenciesを見る

dependencies は、アプリ本体で使う部品を書く場所です。

dependencies:
  flutter:
    sdk: flutter
  timelines_plus: ^2.0.0

今回必要なのは、この2つです。

パッケージ	役割
`flutter`	Flutterアプリを作る基本
`timelines_plus`	縦のタイムラインUIを作る

つまり、今回の人生ゲームでは、

Flutter本体
+
タイムライン表示の部品

を使っているということです。

Step 4：timelines_plusは何をしている？

timelines_plus は、縦の道のようなUIを作るためのパッケージです。

今回のアプリでは、人生のマスをこのように並べています。

20歳｜人生のはじまり
21歳｜準備の日々
23歳｜小さなカフェ
24歳｜ライフイベント
25歳｜初任給
...
65歳｜人生の集計

これを普通に自分で作ると、少し大変です。

でも timelines_plus を使うと、タイムラインらしい見た目を作りやすくなります。

Step 5：main.dartではここで使っている

main.dart の上の方に、この1行があります。

import 'package:timelines_plus/timelines_plus.dart';

これは、

timelines_plusをこのファイルで使います

という意味です。

この1行があるので、pubspec.yaml にも次の設定が必要になります。

timelines_plus: ^2.0.0

Step 6：タイムラインを作っている場所

コードの中では、主にここで使っています。

FixedTimeline(
  theme: TimelineThemeData(
    direction: Axis.vertical,
    nodePosition: 0.075,
    color: AppColors.red,
  ),
  children: List<Widget>.generate(
    _tiles.length,
    (int index) {
      final BoardTile tile = _tiles[index];
      return _buildTimelineTile(tile);
    },
  ),
)

今は全部理解しなくて大丈夫です。

やっていることは、これだけです。

人生のマスの数だけ
タイムラインのカードを作って
縦に並べている

Step 7：uses-material-designも確認する

pubspec.yaml の下の方に、これがあります。

flutter:
  uses-material-design: true

これは、Flutterの標準アイコンを使うために必要です。

今回のコードでは、次のようなアイコンを使っています。

Icons.casino
Icons.refresh
Icons.storefront
Icons.payments
Icons.emoji_events

サイコロ、リセット、物件、給料、ゴールなどのアイコンです。

そのため、これは消さずに残します。

Step 8：dev_dependenciesはそのままでOK

次の部分もあります。

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

これは開発用の設定です。

パッケージ	役割
`flutter_test`	テスト用
`flutter_lints`	コードの書き方チェック用

初心者の方は、ここはそのままで大丈夫です。

今は深く理解しなくてOKです。

Step 9：今回は使わないパッケージ

最初に共有された pubspec.yaml には、次の2つも入っていました。

model_viewer_plus: ^1.9.3
lottie: ^3.3.1

ただし、今回の main.dart では使っていません。

パッケージ	何に使う？	今回必要？
`model_viewer_plus`	3Dモデル表示	今回は不要
`lottie`	アニメーション素材表示	今回は不要
`timelines_plus`	タイムライン表示	必要

初心者のうちは、使っていないものは入れない方が分かりやすいです。

必要なものだけ入れる
↓
エラーが減る
↓
理解しやすい

Step 10：編集したらflutter pub get

pubspec.yaml を編集したら、必ずこのコマンドを実行します。

flutter pub get

これは、

pubspec.yamlに書いたパッケージを読み込んでください

という命令です。

パッケージを追加したときも、削除したときも使います。

Step 11：成功したか確認する

成功すると、ターミナルにこのような表示が出ます。

Resolving dependencies...
Downloading packages...
Got dependencies!

最後に、

Got dependencies!

が出ればOKです。

Step 12：アプリを起動する

パッケージを読み込んだら、アプリを起動します。

flutter run

次のような画面が出れば成功です。

人生ゲーム
タイムライン版
サイコロを振る

ここまでできれば、この章は完了です。

よくあるエラーと直し方

1. timelines_plusが見つからない

エラー例です。

Target of URI doesn't exist:
package:timelines_plus/timelines_plus.dart

原因は、timelines_plus が入っていないことです。

pubspec.yaml にこれがあるか確認します。

timelines_plus: ^2.0.0

そのあと実行します。

flutter pub get

2. pubspec.yamlのスペースが違う

pubspec.yaml は、スペースの位置が大事です。

悪い例です。

dependencies:
flutter:
  sdk: flutter
timelines_plus: ^2.0.0

良い例です。

dependencies:
  flutter:
    sdk: flutter
  timelines_plus: ^2.0.0

flutter: と timelines_plus: の前に、スペースを2つ入れます。

3. flutter pub getを忘れている

pubspec.yaml を編集しただけでは反映されません。

必ず実行します。

flutter pub get

これを忘れると、パッケージが見つからないエラーになります。

4. model_viewer_plusやlottieでエラーが出る

今回、この2つは使いません。

model_viewer_plus: ^1.9.3
lottie: ^3.3.1

エラーが出る場合は、いったん消して大丈夫です。

今回の最小構成はこれです。

dependencies:
  flutter:
    sdk: flutter
  timelines_plus: ^2.0.0

この章で覚えること

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

1. pubspec.yamlはパッケージを書く場所
2. timelines_plusはタイムラインUIを作るための部品
3. 編集したら flutter pub get を実行する

これだけで大丈夫です。

やる気を維持するコツ

パッケージは、最初は難しく見えます。

でも考え方はシンプルです。

自分で全部作ると大変
↓
便利な部品を使う
↓
早くアプリが完成する

今回の timelines_plus は、人生ゲームの道をきれいに表示するための便利な部品です。

全部を自作しなくて大丈夫です。

チェックリスト

□ pubspec.yamlを開いた
□ dependenciesを確認した
□ timelines_plusを追加した
□ uses-material-design: true を確認した
□ model_viewer_plusとlottieは今回は不要だと分かった
□ flutter pub getを実行した
□ Got dependencies! を確認した
□ flutter runで起動した
□ 人生ゲームの画面が表示された

この章のまとめ

この章では、必要なパッケージを確認しました。

今回の人生ゲームで最低限必要なのは、timelines_plus です。

timelines_plus を使うことで、20歳から65歳までの人生マスを、縦のタイムラインとして表示できます。

pubspec.yaml を編集したら、必ず flutter pub get を実行します。

次の章では、main() と MaterialApp を見ながら、アプリがどこから始まるのかを確認します。

必要なパッケージを確認しよう

この節で学べること

目次

ここから