Flutterでデータを表示する考え方は医療関係者向けだけの内容ですか。

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

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

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

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

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

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

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

Flutterでデータを表示する考え方 | Flutterアプリとデータベース連携入門｜アプリのデータを残す仕組み | Flutterアプリケーション開発概論・生成AIオンライン教材

項目	内容
教材名	Flutterアプリケーション開発概論
章	Flutterアプリとデータベース連携入門｜アプリのデータを残す仕組み
節	Flutterでデータを表示する考え方
カテゴリ	Flutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
学習内容	生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

この章で学ぶこと

この章では、データベースから取ってきたデータを、Flutterの画面に表示する考え方を学びます。

最初に覚えることは、これだけです。

データを読み込む
↓
FlutterのWidgetに変える
↓
画面に表示する

Todoアプリで考えると、データベースに入っているTodoを読み込んで、Flutterの画面に一覧として表示します。

データベースのTodo
↓
Flutterで受け取る
↓
ListViewで並べる

7-1. データを画面に出すとは？

データを画面に出すとは、保存されている情報を、ユーザーが見える形にすることです。

例えば、データベースにこのようなTodoがあるとします。

id	title	is_done
1	レポートを書く	false
2	買い物に行く	true
3	英単語を覚える	false

このデータを、Flutterの画面ではこのように表示します。

□ レポートを書く
☑ 買い物に行く
□ 英単語を覚える

つまり、データをそのまま見せるのではなく、画面用の部品に変えて表示します。

Flutterでは、画面に表示する部品を Widget と呼びます。

例えば、文字を出すなら Text を使います。

Text('レポートを書く')

チェックボックスを出すなら、Checkbox を使います。

Checkbox(
  value: false,
  onChanged: (value) {},
)

Todoを1件表示するなら、文字とチェックボックスを組み合わせます。

Checkbox + Text
↓
Todoの1行

7-2. ListViewで一覧表示する

Todoは1件だけではなく、複数あります。

複数のデータを縦に並べたいときは、ListView を使います。

ListView = 縦に並べるためのWidget

Todoアプリなら、次のように並べます。

□ レポートを書く
□ 英単語を覚える
☑ 買い物に行く

ListViewのイメージ

データが3件ある場合です。

Todoデータ 1
Todoデータ 2
Todoデータ 3

これを、Flutterで画面に出します。

ListView
├ レポートを書く
├ 買い物に行く
└ 英単語を覚える

ListView.builderとは？

データの数が増える場合は、ListView.builder を使うことが多いです。

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    final todo = todos[index];

    return ListTile(
      title: Text(todo.title),
    );
  },
)

難しく見えるかもしれませんが、やっていることはシンプルです。

todosの数だけ
↓
1つずつ取り出す
↓
ListTileとして表示する

itemCountとは？

itemCount は、何件表示するかです。

itemCount: todos.length,

例えば、Todoが3件なら、

todos.length = 3

なので、3件表示します。

Todoが10件なら、10件表示します。

itemBuilderとは？

itemBuilder は、1件分の見た目を作る場所です。

itemBuilder: (context, index) {
  final todo = todos[index];

  return ListTile(
    title: Text(todo.title),
  );
}

これは、こういう意味です。

index番目のTodoを取り出す
↓
Textでタイトルを表示する
↓
ListTileとして画面に出す

最初は、

itemBuilder = 1行分の画面を作る場所

と覚えればOKです。

7-3. データが増えると画面も増える

ListViewの便利なところは、データが増えると、表示も自動で増えることです。

例えば、最初にTodoが2件あるとします。

レポートを書く
買い物に行く

画面には2件表示されます。

□ レポートを書く
□ 買い物に行く

ここに新しいTodoを追加します。

英単語を覚える

すると、データが3件になります。

レポートを書く
買い物に行く
英単語を覚える

ListViewは、3件分を表示します。

□ レポートを書く
□ 買い物に行く
□ 英単語を覚える

画面を1つずつ手作業で作らない

もしTodoが100件あったとしても、100個のTextを手で書く必要はありません。

悪い考え方です。

Text('Todo 1')
Text('Todo 2')
Text('Todo 3')
Text('Todo 4')

これでは、データが増えるたびにコードを増やす必要があります。

ListViewを使えば、データの数に合わせて自動で表示できます。

データが増える
↓
表示も増える

これが、一覧表示の大事な考え方です。

7-4. 読み込み中・空の状態・エラー状態を考える

データ表示では、ただ一覧を出すだけでは足りません。

実際のアプリでは、次の3つの状態も考える必要があります。

読み込み中
空の状態
エラー状態

この3つを用意すると、ユーザーにやさしいアプリになります。

読み込み中

データベースからデータを取ってくるには、少し時間がかかることがあります。

その間、何も表示しないと、ユーザーは不安になります。

止まっている？
壊れた？
押せていない？

だから、読み込み中の表示を出します。

読み込み中...

Flutterでは、くるくる回る表示を使うことがあります。

CircularProgressIndicator()

空の状態

Todoが1件もない場合もあります。

そのときに、真っ白な画面だけだと分かりにくいです。

何もない

ではなく、次のように表示すると親切です。

まだTodoがありません。
右下の追加ボタンから作成しましょう。

空の状態を用意すると、初心者にも使いやすいアプリになります。

エラー状態

データの読み込みに失敗することもあります。

例えば、インターネットにつながっていない場合です。

通信できない
データベースに接続できない
権限がない

このような場合は、エラー表示を出します。

データを読み込めませんでした。
通信環境を確認してください。

エラーを無視すると、ユーザーは何が起きたのか分かりません。

3つの状態を整理する

状態	表示例
読み込み中	`読み込み中...`
データあり	Todo一覧を表示
データなし	`まだTodoがありません`
エラー	`読み込みに失敗しました`

一覧表示では、この状態分けがとても大事です。

実装イメージ

実際のFlutterでは、だいたいこのように考えます。

データを読み込み中？
↓
読み込み中を表示

エラーがある？
↓
エラーを表示

データが空？
↓
空のメッセージを表示

データがある？
↓
ListViewで一覧表示

コードの考え方は、こうです。

if (isLoading) {
  return const CircularProgressIndicator();
}

if (errorMessage != null) {
  return Text(errorMessage!);
}

if (todos.isEmpty) {
  return const Text('まだTodoがありません。');
}

return ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    final todo = todos[index];

    return ListTile(
      title: Text(todo.title),
    );
  },
);

最初は、全部を暗記しなくて大丈夫です。

状態によって、表示する画面を変える

これだけ分かればOKです。

よくある勘違い

データがあれば勝手に画面に出る？

出ません。

Flutterでは、データをWidgetに変えて表示する必要があります。

データ
↓
Widget
↓
画面

ListViewはデータベース？

違います。

ListView は、画面に一覧表示するためのWidgetです。

データベースは、データを保存する場所です。

ListView = 表示するもの
データベース = 保存する場所

空の状態は必要ない？

必要です。

データが0件のときも、アプリは何かを表示した方が親切です。

まだデータがありません

このような表示があると、ユーザーが次に何をすればよいか分かります。

インストールや準備について

この章では、まだインストール作業はしません。

ただし、実装に進むときは、以下を使います。

Flutter SDK
Visual Studio Code
Supabase
supabase_flutter

参考URLです。

Flutter公式インストール
https://docs.flutter.dev/install

Flutter × VS Code
https://docs.flutter.dev/tools/vs-code

Supabase Flutter Quickstart
https://supabase.com/docs/guides/getting-started/quickstarts/flutter

supabase_flutter
https://pub.dev/packages/supabase_flutter

この章では、まず「データをどう画面に出すか」を理解できればOKです。

7-5. この章のまとめ

この章では、Flutterでデータを表示する考え方を学びました。

データを画面に出すとは、データをFlutterのWidgetに変えて表示することです。

データ
↓
Widget
↓
画面

複数のデータを表示するときは、ListView を使います。

データが増えると、表示される行も増えます。

また、実際のアプリでは、次の状態も考える必要があります。

読み込み中
データなし
エラー
データあり

この考え方が分かると、Todoアプリだけでなく、メモアプリ、予約アプリ、在庫管理アプリなどにも応用できます。

Flutterでデータを表示する考え方

この節で学べること

目次

ここから