【まとめ】どんなアプリでも同じ流れで作れる | 【Flutter】TikTokのUIから学ぶ画面構築。画面を「部品」と「構造」で組み立てる。 | Flutterアプリケーション開発概論

この節で学ぶこと

ここまでの第4章では、FlutterでTikTok風のショート動画アプリを作りながら、画面を「部品」と「構造」で考える方法を学んできました。

最初は、黒い背景に文字を表示するだけの小さな画面から始まりました。

そこから、Stack で動画の上に文字やボタンを重ね、PageView.builder で縦スワイプを作り、video_player で動画を再生し、いいね・保存・共有・コメント入力まで作ってきました。

一見すると、TikTok風アプリは難しそうに見えます。

しかし、振り返ってみると、やっていることは毎回同じです。

画面を観察する
↓
必要なデータを考える
↓
画面を部品に分ける
↓
部品をWidgetとして作る
↓
状態を持たせる
↓
ユーザー操作で状態を変える
↓
必要な機能を少しずつ追加する

この流れを身につけると、TikTok風アプリだけでなく、商品一覧アプリ、予約アプリ、SNSアプリ、学習アプリ、在庫管理アプリなど、さまざまなアプリを同じ考え方で作れるようになります。

この節で大切なのは、次の一文です。

アプリ開発は、画面を観察し、データ・部品・状態・処理に分けて組み立てる作業である。

第4章で作ったもの

この章では、最終的にTikTok風のショート動画アプリを作りました。

完成アプリには、次のような機能がありました。

TikTok風ショート動画アプリ
├─ 動画を全画面背景で再生する
├─ 上下スワイプで動画を切り替える
├─ 3本の動画を無限に続いているように見せる
├─ 右側にプロフィール・いいね・コメント・保存・共有ボタンを表示する
├─ いいねを押すとハートに色がつき、数字が増える
├─ 保存を押すと保存アイコンに色がつき、数字が増える
├─ 共有を押すと共有アイコンに色がつき、数字が増える
├─ コメントを押すと下からコメント欄が表示される
├─ コメントを入力して追加できる
└─ 下部にユーザー名・キャプション・音源情報を表示する

こうして並べると、かなり本格的なアプリに見えます。

しかし、実装の流れは一気に難しくしたわけではありません。

小さく分けて、1つずつ積み上げました。

最初は土台だけ
↓
次に配置
↓
次にデータ
↓
次にスワイプ
↓
次に動画再生
↓
次にボタン
↓
次に状態管理
↓
次にコメント入力
↓
最後に部品を整理

この「少しずつ作る」という考え方が、アプリ開発ではとても重要です。

第4章の流れを振り返る

第4章では、次のような順番で学びました。

節	内容	学んだ考え方
4-1	TikTok風アプリを分解する	いきなり作らず、画面を観察する
4-2	Flutterの画面はWidgetでできている	画面は小さな部品の組み合わせ
4-3	MaterialAppとScaffoldで土台を作る	アプリ全体と1画面の土台を理解する
4-4	Stackで動画の上に文字やボタンを重ねる	背景の上にUIを重ねる
4-5	動画データをclassで設計する	画面に必要な情報をデータ化する
4-6	PageView.builderで縦スワイプを作る	Listのデータをページに変える
4-7	video_playerで動画を再生する	Controllerで動画を管理する
4-8	無限スクロール風の仕組みを作る	`%` で少ないデータを循環させる
4-9	右側アクションバーを部品化する	同じ形のUIを共通Widgetにする
4-10	いいね・保存・共有の状態を変える	状態とsetStateで画面を更新する
4-11	コメント入力画面をBottomSheetで作る	追加画面と入力欄を作る
4-12	下部の投稿情報を表示する	データを見やすい順番で表示する
4-13	Widgetを分割して整理する	責任ごとにWidgetを分ける
4-14	完成コードを読み解く	データ・状態・処理・Widgetのつながりを見る
4-15	まとめ	どんなアプリにも応用できる流れにする

この章で学んだことは、TikTok風アプリだけの知識ではありません。

Flutterでアプリを作るときの基本的な考え方です。

アプリ作りの基本の流れ

この章を通して、アプリ作りには共通の流れがあることが分かりました。

それは、次の流れです。

1. 作りたい画面を観察する
2. 表示したい情報を洗い出す
3. 情報をclassでデータ化する
4. 画面をWidgetに分ける
5. Listで複数データを扱う
6. builderで一覧やページを作る
7. 状態を持つ
8. ユーザー操作で状態を変える
9. 必要な機能をControllerやパッケージで追加する
10. 最後にWidgetを整理する

この流れは、どんなアプリでもほとんど変わりません。

TikTok風アプリでは、次のように使いました。

作りたい画面を観察する
↓
動画、右側ボタン、下部情報、コメント欄に分ける

表示したい情報を洗い出す
↓
動画URL、ユーザー名、キャプション、いいね数などを考える

情報をclassでデータ化する
↓
ShortVideo classを作る

画面をWidgetに分ける
↓
VideoBackground, RightActionBar, BottomVideoInfo, CommentSheetに分ける

Listで複数データを扱う
↓
const videos = [...]

builderでページを作る
↓
PageView.builder

状態を持つ
↓
likedVideoIndexes, savedVideoIndexes, commentMap

ユーザー操作で状態を変える
↓
toggleLike, openCommentSheet

機能を追加する
↓
video_player, BottomSheet, TextField

Widgetを整理する
↓
完成コードを読みやすくする

これが分かると、アプリ開発はかなり見通しがよくなります。

どんなアプリでもまず画面を観察する

アプリを作るとき、いきなりコードを書こうとすると難しく感じます。

まずやるべきことは、画面を観察することです。

TikTok風アプリでは、画面を次のように観察しました。

画面全体に動画がある
上にタブがある
右にボタンが並んでいる
下にユーザー名と説明文がある
コメントを押すと下からコメント欄が出る

このように観察すると、画面を部品に分けられます。

動画背景
上部ナビ
右側アクションバー
下部投稿情報
コメント欄

これは、他のアプリでも同じです。

たとえば、商品一覧アプリなら、画面をこう観察できます。

上に検索欄がある
カテゴリタブがある
商品カードが並んでいる
お気に入りボタンがある
カートボタンがある

すると、次のように部品に分けられます。

SearchBar
CategoryTabs
ProductCard
FavoriteButton
CartButton

アプリ作りは、まず観察から始まります。

表示する情報をデータとして考える

次に大切なのは、画面に表示される情報をデータとして考えることです。

TikTok風アプリでは、1本の動画に次の情報がありました。

動画URL
ユーザー名
キャプション
音源名
いいね数
コメント数
保存数
共有数
カテゴリ
プロフィール色

これらを ShortVideo classにまとめました。

class ShortVideo {
  const ShortVideo({
    required this.videoUrl,
    required this.userName,
    required this.caption,
    required this.musicTitle,
    required this.likes,
    required this.comments,
    required this.saves,
    required this.shares,
    required this.avatarColor,
    required this.categoryLabel,
  });

  final String videoUrl;
  final String userName;
  final String caption;
  final String musicTitle;
  final int likes;
  final int comments;
  final int saves;
  final int shares;
  final Color avatarColor;
  final String categoryLabel;
}

これは、動画1本分の設計図です。

アプリ開発では、この「1件分のデータ」を考えることがとても重要です。

商品一覧アプリなら、Product classを作ります。

class Product {
  const Product({
    required this.name,
    required this.price,
    required this.description,
    required this.imageUrl,
    required this.isNew,
  });

  final String name;
  final int price;
  final String description;
  final String imageUrl;
  final bool isNew;
}

予約アプリなら、ReservationSlot classを作るかもしれません。

class ReservationSlot {
  const ReservationSlot({
    required this.date,
    required this.time,
    required this.isAvailable,
  });

  final String date;
  final String time;
  final bool isAvailable;
}

SNSアプリなら、Post classを作れます。

class Post {
  const Post({
    required this.userName,
    required this.body,
    required this.likes,
    required this.comments,
  });

  final String userName;
  final String body;
  final int likes;
  final int comments;
}

どんなアプリでも、まず「この画面の1件分のデータは何か」を考えることが大切です。

Flutterでは、画面はWidgetでできています。

TikTok風アプリでは、次のように分けました。

ShortVideoPage
├─ VideoBackground
├─ VideoGradientOverlay
├─ TopNavigation
├─ PageIndicator
├─ RightActionBar
└─ BottomVideoInfo

右側アクションバーは、さらに分けました。

RightActionBar
├─ ProfileButton
├─ ActionButton いいね
├─ ActionButton コメント
├─ ActionButton 保存
├─ ActionButton 共有
└─ SpinningDisc

コメント欄も分けました。

CommentSheet
├─ CommentTile
└─ CommentInputBar

このように分けると、複雑な画面でも理解しやすくなります。

大切なのは、「名前をつけられるまとまり」で分けることです。

動画背景だから VideoBackground
右側の操作ボタンだから RightActionBar
コメント欄だから CommentSheet
下部情報だから BottomVideoInfo

Widget名を見ただけで役割が分かるようにすると、コードは読みやすくなります。

Stackで重なりを作る

TikTok風アプリで重要だったのが Stack です。

動画背景の上に、ボタンや文字を重ねる必要がありました。

Stack
├─ 背景動画
├─ グラデーション
├─ 上部ナビ
├─ 右側ボタン
└─ 下部情報

Stack は、重なりのあるUIを作るときに使います。

Stack(
  children: [
    Positioned.fill(
      child: VideoBackground(controller: controller),
    ),
    const Positioned.fill(
      child: VideoGradientOverlay(),
    ),
    const Positioned(
      top: 44,
      left: 0,
      right: 0,
      child: TopNavigation(),
    ),
    Positioned(
      right: 12,
      bottom: 92,
      child: RightActionBar(...),
    ),
    Positioned(
      left: 16,
      right: 86,
      bottom: 28,
      child: BottomVideoInfo(video: video),
    ),
  ],
)

この考え方も、他のアプリに応用できます。

たとえば、写真編集アプリなら、写真の上に編集ボタンを重ねます。

Stack
├─ 写真
├─ フィルター
├─ 編集ボタン
└─ 保存ボタン

地図アプリなら、地図の上に検索欄や現在地ボタンを重ねます。

Stack
├─ 地図
├─ 検索欄
├─ 現在地ボタン
└─ 詳細パネル

重なりのある画面では、Stack が強力です。

Listとbuilderで複数データを表示する

TikTok風アプリでは、複数の動画を扱いました。

const videos = [
  ShortVideo(...),
  ShortVideo(...),
  ShortVideo(...),
];

この複数データを、PageView.builder で1ページずつ表示しました。

PageView.builder(
  scrollDirection: Axis.vertical,
  itemBuilder: (context, pageIndex) {
    final videoIndex = pageIndex % videos.length;
    final video = videos[videoIndex];

    return ShortVideoPage(
      video: video,
      ...
    );
  },
)

この考え方は、どんな一覧画面でも使えます。

商品一覧なら、ListView.builder で商品カードを並べます。

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

    return ProductCard(product: product);
  },
)

チャットアプリなら、メッセージ一覧を表示します。

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

    return MessageBubble(message: message);
  },
)

学習アプリなら、レッスン一覧を表示できます。

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

    return LessonCard(lesson: lesson);
  },
)

複数データを画面に並べるときは、List と builder の組み合わせが基本です。

状態を持つと画面が動く

この章では、いいね・保存・共有・コメントの状態を扱いました。

状態とは、画面に影響する現在の値です。

いいねしているか
保存しているか
共有したか
コメントが何件あるか
今どの動画を見ているか

状態を変えると、画面が変わります。

isLiked = false
↓
白いハート

isLiked = true
↓
ピンクのハート

Flutterでは、状態を変えたら setState で画面を更新します。

setState(() {
  isLiked = !isLiked;
});

複数動画に対応するために、完成版では Set<int> を使いました。

final Set<int> likedVideoIndexes = {};
final Set<int> savedVideoIndexes = {};
final Set<int> sharedVideoIndexes = {};

これにより、動画ごとに状態を分けて管理できます。

videos[0] はいいね済み
videos[1] は未いいね
videos[2] は保存済み

この考え方は、他のアプリでも同じです。

商品一覧なら、お気に入り状態を持ちます。

final Set<int> favoriteProductIndexes = {};

学習アプリなら、完了済みレッスンを持てます。

final Set<int> completedLessonIndexes = {};

予約アプリなら、選択中の時間枠を持てます。

int? selectedSlotIndex;

画面を動かすには、状態が必要です。

Controllerは何かを管理するもの

この章では、いくつかのControllerが出てきました。

Controller	管理するもの
`PageController`	PageViewのページ位置
`VideoPlayerController`	動画の再生・停止
`TextEditingController`	入力欄の文字

Controllerは、何かを操作・管理するためのものです。

PageController
↓
ページを管理する

VideoPlayerController
↓
動画を管理する

TextEditingController
↓
入力文字を管理する

たとえば、動画再生では VideoPlayerController を使いました。

final controller = VideoPlayerController.networkUrl(
  Uri.parse(video.videoUrl),
);

コメント入力では、TextEditingController を使いました。

final TextEditingController controller = TextEditingController();

Controllerを使うときは、使い終わったら dispose で片付けることも学びました。

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

これはFlutterでとても大切な習慣です。

親が状態を持ち、子に渡す

この章で何度も出てきた重要な考え方があります。

それは、親Widgetが状態を持ち、子Widgetに必要な値と処理を渡すことです。

親Widget
├─ 状態を持つ
├─ 処理を持つ
└─ 子Widgetに渡す

TikTok風アプリでは、ShortVideoHomePage が多くの状態を持っていました。

ShortVideoHomePage
├─ currentPageIndex
├─ likedVideoIndexes
├─ savedVideoIndexes
├─ sharedVideoIndexes
├─ commentMap
└─ controllers

そして、ShortVideoPage や RightActionBar に値と処理を渡しました。

RightActionBar(
  isLiked: likedVideoIndexes.contains(videoIndex),
  isSaved: savedVideoIndexes.contains(videoIndex),
  isShared: sharedVideoIndexes.contains(videoIndex),
  onTapLike: () => toggleLike(videoIndex),
  onTapComment: () => openCommentSheet(videoIndex),
  onTapSave: () => toggleSave(videoIndex),
  onTapShare: () => toggleShare(videoIndex),
)

子Widgetは、受け取った値を表示し、必要なときに受け取った関数を呼びます。

RightActionBar
↓
受け取ったisLikedで色を変える
受け取ったonTapLikeをActionButtonに渡す

この流れは、とても大切です。

親が状態を管理する
子は表示に集中する

この考え方を身につけると、複雑なアプリでも整理しやすくなります。

この章で身についた考え方

第4章を通して、次の考え方が身につきました。

1. 画面を部品として見る

複雑な画面でも、よく見ると部品の集まりです。

動画背景
右側ボタン
下部情報
コメント欄

部品として見られるようになると、コードにしやすくなります。

2. 表示情報をデータとして見る

画面に表示されている文字や数字には、元データがあります。

ユーザー名
キャプション
いいね数
コメント数
音源名

それらをclassにまとめると、アプリとして扱いやすくなります。

いいね・コメント・保存・共有は、すべて似た形でした。

アイコン
数字

そのため、ActionButton という共通Widgetにしました。

ActionButton(
  icon: Icons.favorite_rounded,
  label: formatCount(likeCount),
)

4. 状態を変えると画面が変わる

いいねや保存は、状態です。

押していない
↓
白

押した
↓
色がつく

Flutterでは、setState で状態変更を画面に反映します。

5. 機能は小さく追加する

最初から動画再生、スワイプ、コメント入力を全部作ろうとすると難しいです。

この章では、機能を小さく分けて追加しました。

まず土台
次に配置
次にデータ
次にスワイプ
次に動画再生
次に状態管理
次にコメント入力

この順番なら、難しいアプリも少しずつ作れます。

他のアプリに応用する

ここからは、TikTok風アプリで学んだ考え方を、他のアプリに応用してみます。

例1 商品一覧アプリ

商品一覧アプリを作る場合も、流れは同じです。

まず、画面を観察します。

検索欄
カテゴリ
商品カード
お気に入りボタン
カートボタン

次に、データを考えます。

class Product {
  const Product({
    required this.name,
    required this.price,
    required this.description,
    required this.imageUrl,
  });

  final String name;
  final int price;
  final String description;
  final String imageUrl;
}

次に、Widgetに分けます。

ProductListPage
├─ SearchBar
├─ CategoryTabs
├─ ProductCard
├─ FavoriteButton
└─ CartButton

状態を考えます。

お気に入り済み商品
カートに入っている商品
選択中カテゴリ
検索文字

実装の考え方は、TikTok風アプリと同じです。

ShortVideo → Product
ShortVideoPage → ProductCard
likedVideoIndexes → favoriteProductIndexes
PageView.builder → ListView.builder

例2 予約アプリ

予約アプリでも流れは同じです。

まず、画面を観察します。

日付選択
時間枠一覧
予約可能表示
選択中の時間
予約ボタン

データを考えます。

class TimeSlot {
  const TimeSlot({
    required this.time,
    required this.isAvailable,
  });

  final String time;
  final bool isAvailable;
}

Widgetに分けます。

ReservationPage
├─ DateSelector
├─ TimeSlotList
├─ TimeSlotButton
└─ ReserveButton

状態を考えます。

選択中の日付
選択中の時間枠
予約可能かどうか

TikTok風アプリでいう currentPageIndex や likedVideoIndexes のように、画面の状態を管理します。

例3 学習アプリ

学習アプリでも同じです。

画面を観察します。

講座タイトル
章一覧
進捗率
完了ボタン
次へボタン

データを考えます。

class Lesson {
  const Lesson({
    required this.title,
    required this.description,
    required this.isLocked,
  });

  final String title;
  final String description;
  final bool isLocked;
}

Widgetに分けます。

LessonPage
├─ LessonHeader
├─ LessonProgress
├─ LessonCard
└─ NextLessonButton

状態を考えます。

完了済みレッスン
現在選択中の章
ロック状態

これも、基本は同じです。

例4 SNS投稿アプリ

SNS投稿アプリも同じ流れで作れます。

画面を観察します。

投稿者アイコン
投稿者名
本文
画像
いいねボタン
コメントボタン
シェアボタン

データを考えます。

class Post {
  const Post({
    required this.userName,
    required this.body,
    required this.likes,
    required this.comments,
  });

  final String userName;
  final String body;
  final int likes;
  final int comments;
}

Widgetに分けます。

TimelinePage
├─ PostCard
├─ UserAvatar
├─ PostBody
├─ ReactionBar
└─ CommentSheet

状態を考えます。

いいね済み投稿
コメント一覧
シェア済み投稿

これは、TikTok風アプリの構造とかなり似ています。

「どんなアプリでも同じ流れ」とはどういう意味か

もちろん、アプリごとに使う機能は違います。

動画アプリでは video_player を使いました。

地図アプリなら地図のパッケージを使うかもしれません。

チャットアプリならWebSocketやFirebaseを使うかもしれません。

しかし、基本の考え方は同じです。

画面を分解する
データを設計する
Widgetに分ける
状態を管理する
操作で状態を変える
必要な機能を追加する

つまり、アプリごとに違うのは「部品の中身」です。

でも、作り方の流れは大きく変わりません。

TikTok風アプリ
↓
動画・スワイプ・コメント

商品アプリ
↓
商品・お気に入り・カート

予約アプリ
↓
日付・時間・予約

学習アプリ
↓
講座・進捗・完了

見た目やテーマが違っても、考える順番は同じです。

自信につながる考え方

初心者のうちは、完成アプリを見ると「自分には作れない」と感じることがあります。

しかし、完成アプリも、最初は小さな部品から始まっています。

Textを置く
Iconを置く
Columnで並べる
Stackで重ねる
classでデータを作る
Listで複数持つ
builderで表示する
setStateで変える

1つずつは、これまで学んできた内容です。

大切なのは、完成形を見て圧倒されるのではなく、分解することです。

難しそう
↓
どんな部品に分けられるか考える

複雑そう
↓
どんなデータが必要か考える

動きが多そう
↓
どんな状態が変わっているか考える

このように見られるようになると、アプリ開発はかなり怖くなくなります。

アプリを作るときのチェックリスト

今後、別のアプリを作るときは、次のチェックリストを使えます。

1. 画面を観察する

この画面には何があるか
どこに何が配置されているか
ユーザーは何を操作するか

2. 部品に分ける

ヘッダー
カード
ボタン
一覧
入力欄
モーダル
下部ナビ

3. データを考える

1件分のデータには何が必要か
文字は何か
数字は何か
画像や動画URLは必要か
状態は必要か

4. classを作る

Product
Post
Lesson
Reservation
Message
ShortVideo

5. Listで複数データを持つ

products
posts
lessons
reservations
messages
videos

6. builderで表示する

ListView.builder
GridView.builder
PageView.builder

7. 状態を考える

選択中か
いいね済みか
入力中か
読み込み中か
完了済みか
保存済みか

8. 操作を考える

タップしたら何が変わるか
入力したら何が変わるか
送信したら何が追加されるか
スワイプしたら何が切り替わるか

役割ごとに名前をつける
長すぎるWidgetを分ける
同じ形のUIを共通化する

10. 最後に整理する

読みにくい場所はないか
同じコードを繰り返していないか
状態の場所は自然か
Widget名は分かりやすいか

このチェックリストを使うと、どんなアプリでも同じ流れで考えやすくなります。

この章で大切だったコードの型

第4章で何度も出てきた重要な形を振り返ります。

アプリの入口

void main() {
  runApp(const MyApp());
}

アプリ全体

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

データclass

class Item {
  const Item({
    required this.title,
    required this.description,
  });

  final String title;
  final String description;
}

Listデータ

const items = [
  Item(
    title: 'タイトル1',
    description: '説明1',
  ),
  Item(
    title: 'タイトル2',
    description: '説明2',
  ),
];

builderで表示

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

    return ItemCard(item: item);
  },
)

状態を変える

setState(() {
  isActive = !isActive;
});

親から子にデータを渡す

ItemCard(item: item)

class ItemCard extends StatelessWidget {
  const ItemCard({
    super.key,
    required this.item,
  });

  final Item item;

  @override
  Widget build(BuildContext context) {
    return Text(item.title);
  }
}

この型を覚えると、別のアプリでも応用しやすくなります。

最後に：アプリは一気に完成させなくていい

この章で一番伝えたいことは、アプリは一気に完成させなくていいということです。

むしろ、いきなり完成形を作ろうとすると、どこから手をつければよいか分からなくなります。

今回のTikTok風アプリも、最初はとても小さく始めました。

黒背景を作る
↓
文字を置く
↓
Stackで重ねる
↓
データを作る
↓
PageViewで切り替える
↓
動画を再生する
↓
ボタンを作る
↓
状態を変える
↓
コメント欄を作る
↓
Widgetを整理する

これなら、1つずつ理解できます。

完成アプリは、たくさんの小さな理解の積み重ねです。

小さく作る
↓
動かして確認する
↓
少し機能を足す
↓
また確認する

この進め方を身につけると、どんなアプリでも作り始める勇気が出ます。

この節の確認問題

確認問題1

アプリを作るとき、最初にするべきことは何ですか。

答え

作りたい画面を観察し、どんな部品でできているかを分解することです。

確認問題2

画面に表示する情報は、どのように整理すると扱いやすくなりますか。

答え

classを使って、1件分のデータとして整理すると扱いやすくなります。

確認問題3

複数のデータを表示するときによく使う組み合わせは何ですか。

答え

List と builder を組み合わせます。

たとえば、ListView.builder や PageView.builder を使います。

確認問題4

ユーザー操作で画面を変えるには、何が必要ですか。

答え

状態を持ち、その状態を setState で変更して画面を更新します。

確認問題5

Widgetを分割する理由は何ですか。

答え

コードを読みやすくし、役割ごとに整理し、修正や再利用をしやすくするためです。

確認問題6

親Widgetと子Widgetの関係で大切なことは何ですか。

答え

親Widgetが状態や処理を持ち、子Widgetに必要なデータや関数を渡すことです。

子Widgetは表示に集中します。

確認問題7

TikTok風アプリで学んだ流れは、他のアプリにも応用できますか。

答え

できます。

画面を分解し、データを設計し、Widgetに分け、状態を管理し、ユーザー操作で更新するという流れは、多くのアプリで共通しています。

第4章のまとめ

第4章では、TikTok風アプリを題材に、Flutterの画面を「部品」と「構造」で作る考え方を学びました。

この章で学んだことは、次の通りです。

Flutterの画面はWidgetでできている
MaterialAppとScaffoldでアプリの土台を作る
Stackで動画の上にUIを重ねる
classで動画データを設計する
PageView.builderで縦スワイプを作る
video_playerで動画を再生する
%で無限スクロール風に見せる
RightActionBarを部品化する
setStateでいいね・保存・共有の状態を変える
BottomSheetでコメント欄を表示する
TextFieldでコメントを入力する
BottomVideoInfoで投稿情報を表示する
Widgetを分割して読みやすいコードに整える
完成コードを役割ごとに読み解く

そして、最も大切なのは、次の考え方です。

どんなアプリでも、
画面を観察し、
データを設計し、
Widgetに分け、
状態を管理し、
小さく動かしながら作ればよい。

これが分かると、アプリ開発は「何をすればいいか分からないもの」ではなくなります。

次に作るアプリでも、この流れを思い出してください。

画面を見る
↓
部品に分ける
↓
データを考える
↓
Widgetを作る
↓
状態を持つ
↓
操作で変える
↓
少しずつ完成に近づける

この流れで進めれば、TikTok風アプリだけでなく、商品一覧、予約、SNS、学習、在庫管理など、さまざまなアプリを作る土台になります。

参考文献

Flutter documentation, “Introduction to widgets”
Flutter documentation, “Building layouts”
Flutter documentation, “StatefulWidget class”
Flutter documentation, “ListView class”
Flutter documentation, “PageView class”
Flutter documentation, “showModalBottomSheet function”
Flutter cookbook, “Use lists”
Flutter cookbook, “Manage focus in text fields”
video_player package documentation, “video_player”

この節で学ぶこと

ここまでの第4章では、FlutterでTikTok風のショート動画アプリを作りながら、画面を「部品」と「構造」で考える方法を学んできました。

最初は、黒い背景に文字を表示するだけの小さな画面から始まりました。

一見すると、TikTok風アプリは難しそうに見えます。

しかし、振り返ってみると、やっていることは毎回同じです。

画面を観察する
↓
必要なデータを考える
↓
画面を部品に分ける
↓
部品をWidgetとして作る
↓
状態を持たせる
↓
ユーザー操作で状態を変える
↓
必要な機能を少しずつ追加する

この節で大切なのは、次の一文です。

アプリ開発は、画面を観察し、データ・部品・状態・処理に分けて組み立てる作業である。

第4章で作ったもの

この章では、最終的にTikTok風のショート動画アプリを作りました。

完成アプリには、次のような機能がありました。

TikTok風ショート動画アプリ
├─ 動画を全画面背景で再生する
├─ 上下スワイプで動画を切り替える
├─ 3本の動画を無限に続いているように見せる
├─ 右側にプロフィール・いいね・コメント・保存・共有ボタンを表示する
├─ いいねを押すとハートに色がつき、数字が増える
├─ 保存を押すと保存アイコンに色がつき、数字が増える
├─ 共有を押すと共有アイコンに色がつき、数字が増える
├─ コメントを押すと下からコメント欄が表示される
├─ コメントを入力して追加できる
└─ 下部にユーザー名・キャプション・音源情報を表示する

こうして並べると、かなり本格的なアプリに見えます。

しかし、実装の流れは一気に難しくしたわけではありません。

小さく分けて、1つずつ積み上げました。

最初は土台だけ
↓
次に配置
↓
次にデータ
↓
次にスワイプ
↓
次に動画再生
↓
次にボタン
↓
次に状態管理
↓
次にコメント入力
↓
最後に部品を整理

この「少しずつ作る」という考え方が、アプリ開発ではとても重要です。

第4章の流れを振り返る

第4章では、次のような順番で学びました。

節	内容	学んだ考え方
4-1	TikTok風アプリを分解する	いきなり作らず、画面を観察する
4-2	Flutterの画面はWidgetでできている	画面は小さな部品の組み合わせ
4-3	MaterialAppとScaffoldで土台を作る	アプリ全体と1画面の土台を理解する
4-4	Stackで動画の上に文字やボタンを重ねる	背景の上にUIを重ねる
4-5	動画データをclassで設計する	画面に必要な情報をデータ化する
4-6	PageView.builderで縦スワイプを作る	Listのデータをページに変える
4-7	video_playerで動画を再生する	Controllerで動画を管理する
4-8	無限スクロール風の仕組みを作る	`%` で少ないデータを循環させる
4-9	右側アクションバーを部品化する	同じ形のUIを共通Widgetにする
4-10	いいね・保存・共有の状態を変える	状態とsetStateで画面を更新する
4-11	コメント入力画面をBottomSheetで作る	追加画面と入力欄を作る
4-12	下部の投稿情報を表示する	データを見やすい順番で表示する
4-13	Widgetを分割して整理する	責任ごとにWidgetを分ける
4-14	完成コードを読み解く	データ・状態・処理・Widgetのつながりを見る
4-15	まとめ	どんなアプリにも応用できる流れにする

この章で学んだことは、TikTok風アプリだけの知識ではありません。

Flutterでアプリを作るときの基本的な考え方です。

アプリ作りの基本の流れ

この章を通して、アプリ作りには共通の流れがあることが分かりました。

それは、次の流れです。

1. 作りたい画面を観察する
2. 表示したい情報を洗い出す
3. 情報をclassでデータ化する
4. 画面をWidgetに分ける
5. Listで複数データを扱う
6. builderで一覧やページを作る
7. 状態を持つ
8. ユーザー操作で状態を変える
9. 必要な機能をControllerやパッケージで追加する
10. 最後にWidgetを整理する

この流れは、どんなアプリでもほとんど変わりません。

TikTok風アプリでは、次のように使いました。

作りたい画面を観察する
↓
動画、右側ボタン、下部情報、コメント欄に分ける

表示したい情報を洗い出す
↓
動画URL、ユーザー名、キャプション、いいね数などを考える

情報をclassでデータ化する
↓
ShortVideo classを作る

画面をWidgetに分ける
↓
VideoBackground, RightActionBar, BottomVideoInfo, CommentSheetに分ける

Listで複数データを扱う
↓
const videos = [...]

builderでページを作る
↓
PageView.builder

状態を持つ
↓
likedVideoIndexes, savedVideoIndexes, commentMap

ユーザー操作で状態を変える
↓
toggleLike, openCommentSheet

機能を追加する
↓
video_player, BottomSheet, TextField

Widgetを整理する
↓
完成コードを読みやすくする

これが分かると、アプリ開発はかなり見通しがよくなります。

どんなアプリでもまず画面を観察する

アプリを作るとき、いきなりコードを書こうとすると難しく感じます。

まずやるべきことは、画面を観察することです。

TikTok風アプリでは、画面を次のように観察しました。

画面全体に動画がある
上にタブがある
右にボタンが並んでいる
下にユーザー名と説明文がある
コメントを押すと下からコメント欄が出る

このように観察すると、画面を部品に分けられます。

動画背景
上部ナビ
右側アクションバー
下部投稿情報
コメント欄

これは、他のアプリでも同じです。

たとえば、商品一覧アプリなら、画面をこう観察できます。

上に検索欄がある
カテゴリタブがある
商品カードが並んでいる
お気に入りボタンがある
カートボタンがある

すると、次のように部品に分けられます。

SearchBar
CategoryTabs
ProductCard
FavoriteButton
CartButton

アプリ作りは、まず観察から始まります。

表示する情報をデータとして考える

次に大切なのは、画面に表示される情報をデータとして考えることです。

TikTok風アプリでは、1本の動画に次の情報がありました。

動画URL
ユーザー名
キャプション
音源名
いいね数
コメント数
保存数
共有数
カテゴリ
プロフィール色

これらを ShortVideo classにまとめました。

class ShortVideo {
  const ShortVideo({
    required this.videoUrl,
    required this.userName,
    required this.caption,
    required this.musicTitle,
    required this.likes,
    required this.comments,
    required this.saves,
    required this.shares,
    required this.avatarColor,
    required this.categoryLabel,
  });

  final String videoUrl;
  final String userName;
  final String caption;
  final String musicTitle;
  final int likes;
  final int comments;
  final int saves;
  final int shares;
  final Color avatarColor;
  final String categoryLabel;
}

これは、動画1本分の設計図です。

アプリ開発では、この「1件分のデータ」を考えることがとても重要です。

商品一覧アプリなら、Product classを作ります。

class Product {
  const Product({
    required this.name,
    required this.price,
    required this.description,
    required this.imageUrl,
    required this.isNew,
  });

  final String name;
  final int price;
  final String description;
  final String imageUrl;
  final bool isNew;
}

予約アプリなら、ReservationSlot classを作るかもしれません。

class ReservationSlot {
  const ReservationSlot({
    required this.date,
    required this.time,
    required this.isAvailable,
  });

  final String date;
  final String time;
  final bool isAvailable;
}

SNSアプリなら、Post classを作れます。

class Post {
  const Post({
    required this.userName,
    required this.body,
    required this.likes,
    required this.comments,
  });

  final String userName;
  final String body;
  final int likes;
  final int comments;
}

どんなアプリでも、まず「この画面の1件分のデータは何か」を考えることが大切です。

Flutterでは、画面はWidgetでできています。

TikTok風アプリでは、次のように分けました。

ShortVideoPage
├─ VideoBackground
├─ VideoGradientOverlay
├─ TopNavigation
├─ PageIndicator
├─ RightActionBar
└─ BottomVideoInfo

右側アクションバーは、さらに分けました。

RightActionBar
├─ ProfileButton
├─ ActionButton いいね
├─ ActionButton コメント
├─ ActionButton 保存
├─ ActionButton 共有
└─ SpinningDisc

コメント欄も分けました。

CommentSheet
├─ CommentTile
└─ CommentInputBar

このように分けると、複雑な画面でも理解しやすくなります。

大切なのは、「名前をつけられるまとまり」で分けることです。

動画背景だから VideoBackground
右側の操作ボタンだから RightActionBar
コメント欄だから CommentSheet
下部情報だから BottomVideoInfo

Widget名を見ただけで役割が分かるようにすると、コードは読みやすくなります。

Stackで重なりを作る

TikTok風アプリで重要だったのが Stack です。

動画背景の上に、ボタンや文字を重ねる必要がありました。

Stack
├─ 背景動画
├─ グラデーション
├─ 上部ナビ
├─ 右側ボタン
└─ 下部情報

Stack は、重なりのあるUIを作るときに使います。

Stack(
  children: [
    Positioned.fill(
      child: VideoBackground(controller: controller),
    ),
    const Positioned.fill(
      child: VideoGradientOverlay(),
    ),
    const Positioned(
      top: 44,
      left: 0,
      right: 0,
      child: TopNavigation(),
    ),
    Positioned(
      right: 12,
      bottom: 92,
      child: RightActionBar(...),
    ),
    Positioned(
      left: 16,
      right: 86,
      bottom: 28,
      child: BottomVideoInfo(video: video),
    ),
  ],
)

この考え方も、他のアプリに応用できます。

たとえば、写真編集アプリなら、写真の上に編集ボタンを重ねます。

Stack
├─ 写真
├─ フィルター
├─ 編集ボタン
└─ 保存ボタン

地図アプリなら、地図の上に検索欄や現在地ボタンを重ねます。

Stack
├─ 地図
├─ 検索欄
├─ 現在地ボタン
└─ 詳細パネル

重なりのある画面では、Stack が強力です。

Listとbuilderで複数データを表示する

TikTok風アプリでは、複数の動画を扱いました。

const videos = [
  ShortVideo(...),
  ShortVideo(...),
  ShortVideo(...),
];

この複数データを、PageView.builder で1ページずつ表示しました。

PageView.builder(
  scrollDirection: Axis.vertical,
  itemBuilder: (context, pageIndex) {
    final videoIndex = pageIndex % videos.length;
    final video = videos[videoIndex];

    return ShortVideoPage(
      video: video,
      ...
    );
  },
)

この考え方は、どんな一覧画面でも使えます。

商品一覧なら、ListView.builder で商品カードを並べます。

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

    return ProductCard(product: product);
  },
)

チャットアプリなら、メッセージ一覧を表示します。

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

    return MessageBubble(message: message);
  },
)

学習アプリなら、レッスン一覧を表示できます。

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

    return LessonCard(lesson: lesson);
  },
)

複数データを画面に並べるときは、List と builder の組み合わせが基本です。

状態を持つと画面が動く

この章では、いいね・保存・共有・コメントの状態を扱いました。

状態とは、画面に影響する現在の値です。

いいねしているか
保存しているか
共有したか
コメントが何件あるか
今どの動画を見ているか

状態を変えると、画面が変わります。

isLiked = false
↓
白いハート

isLiked = true
↓
ピンクのハート

Flutterでは、状態を変えたら setState で画面を更新します。

setState(() {
  isLiked = !isLiked;
});

複数動画に対応するために、完成版では Set<int> を使いました。

final Set<int> likedVideoIndexes = {};
final Set<int> savedVideoIndexes = {};
final Set<int> sharedVideoIndexes = {};

これにより、動画ごとに状態を分けて管理できます。

videos[0] はいいね済み
videos[1] は未いいね
videos[2] は保存済み

この考え方は、他のアプリでも同じです。

商品一覧なら、お気に入り状態を持ちます。

final Set<int> favoriteProductIndexes = {};

学習アプリなら、完了済みレッスンを持てます。

final Set<int> completedLessonIndexes = {};

予約アプリなら、選択中の時間枠を持てます。

int? selectedSlotIndex;

画面を動かすには、状態が必要です。

Controllerは何かを管理するもの

この章では、いくつかのControllerが出てきました。

Controller	管理するもの
`PageController`	PageViewのページ位置
`VideoPlayerController`	動画の再生・停止
`TextEditingController`	入力欄の文字

Controllerは、何かを操作・管理するためのものです。

PageController
↓
ページを管理する

VideoPlayerController
↓
動画を管理する

TextEditingController
↓
入力文字を管理する

たとえば、動画再生では VideoPlayerController を使いました。

final controller = VideoPlayerController.networkUrl(
  Uri.parse(video.videoUrl),
);

コメント入力では、TextEditingController を使いました。

final TextEditingController controller = TextEditingController();

Controllerを使うときは、使い終わったら dispose で片付けることも学びました。

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

これはFlutterでとても大切な習慣です。

親が状態を持ち、子に渡す

この章で何度も出てきた重要な考え方があります。

それは、親Widgetが状態を持ち、子Widgetに必要な値と処理を渡すことです。

親Widget
├─ 状態を持つ
├─ 処理を持つ
└─ 子Widgetに渡す

TikTok風アプリでは、ShortVideoHomePage が多くの状態を持っていました。

ShortVideoHomePage
├─ currentPageIndex
├─ likedVideoIndexes
├─ savedVideoIndexes
├─ sharedVideoIndexes
├─ commentMap
└─ controllers

そして、ShortVideoPage や RightActionBar に値と処理を渡しました。

RightActionBar(
  isLiked: likedVideoIndexes.contains(videoIndex),
  isSaved: savedVideoIndexes.contains(videoIndex),
  isShared: sharedVideoIndexes.contains(videoIndex),
  onTapLike: () => toggleLike(videoIndex),
  onTapComment: () => openCommentSheet(videoIndex),
  onTapSave: () => toggleSave(videoIndex),
  onTapShare: () => toggleShare(videoIndex),
)

子Widgetは、受け取った値を表示し、必要なときに受け取った関数を呼びます。

RightActionBar
↓
受け取ったisLikedで色を変える
受け取ったonTapLikeをActionButtonに渡す

この流れは、とても大切です。

親が状態を管理する
子は表示に集中する

この考え方を身につけると、複雑なアプリでも整理しやすくなります。

この章で身についた考え方

第4章を通して、次の考え方が身につきました。

1. 画面を部品として見る

複雑な画面でも、よく見ると部品の集まりです。

動画背景
右側ボタン
下部情報
コメント欄

部品として見られるようになると、コードにしやすくなります。

2. 表示情報をデータとして見る

画面に表示されている文字や数字には、元データがあります。

ユーザー名
キャプション
いいね数
コメント数
音源名

それらをclassにまとめると、アプリとして扱いやすくなります。

いいね・コメント・保存・共有は、すべて似た形でした。

アイコン
数字

そのため、ActionButton という共通Widgetにしました。

ActionButton(
  icon: Icons.favorite_rounded,
  label: formatCount(likeCount),
)

4. 状態を変えると画面が変わる

いいねや保存は、状態です。

押していない
↓
白

押した
↓
色がつく

Flutterでは、setState で状態変更を画面に反映します。

5. 機能は小さく追加する

最初から動画再生、スワイプ、コメント入力を全部作ろうとすると難しいです。

この章では、機能を小さく分けて追加しました。

まず土台
次に配置
次にデータ
次にスワイプ
次に動画再生
次に状態管理
次にコメント入力

この順番なら、難しいアプリも少しずつ作れます。

他のアプリに応用する

ここからは、TikTok風アプリで学んだ考え方を、他のアプリに応用してみます。

例1 商品一覧アプリ

商品一覧アプリを作る場合も、流れは同じです。

まず、画面を観察します。

検索欄
カテゴリ
商品カード
お気に入りボタン
カートボタン

次に、データを考えます。

class Product {
  const Product({
    required this.name,
    required this.price,
    required this.description,
    required this.imageUrl,
  });

  final String name;
  final int price;
  final String description;
  final String imageUrl;
}

次に、Widgetに分けます。

ProductListPage
├─ SearchBar
├─ CategoryTabs
├─ ProductCard
├─ FavoriteButton
└─ CartButton

状態を考えます。

お気に入り済み商品
カートに入っている商品
選択中カテゴリ
検索文字

実装の考え方は、TikTok風アプリと同じです。

ShortVideo → Product
ShortVideoPage → ProductCard
likedVideoIndexes → favoriteProductIndexes
PageView.builder → ListView.builder

例2 予約アプリ

予約アプリでも流れは同じです。

まず、画面を観察します。

日付選択
時間枠一覧
予約可能表示
選択中の時間
予約ボタン

データを考えます。

class TimeSlot {
  const TimeSlot({
    required this.time,
    required this.isAvailable,
  });

  final String time;
  final bool isAvailable;
}

Widgetに分けます。

ReservationPage
├─ DateSelector
├─ TimeSlotList
├─ TimeSlotButton
└─ ReserveButton

状態を考えます。

選択中の日付
選択中の時間枠
予約可能かどうか

TikTok風アプリでいう currentPageIndex や likedVideoIndexes のように、画面の状態を管理します。

例3 学習アプリ

学習アプリでも同じです。

画面を観察します。

講座タイトル
章一覧
進捗率
完了ボタン
次へボタン

データを考えます。

class Lesson {
  const Lesson({
    required this.title,
    required this.description,
    required this.isLocked,
  });

  final String title;
  final String description;
  final bool isLocked;
}

Widgetに分けます。

LessonPage
├─ LessonHeader
├─ LessonProgress
├─ LessonCard
└─ NextLessonButton

状態を考えます。

完了済みレッスン
現在選択中の章
ロック状態

これも、基本は同じです。

例4 SNS投稿アプリ

SNS投稿アプリも同じ流れで作れます。

画面を観察します。

投稿者アイコン
投稿者名
本文
画像
いいねボタン
コメントボタン
シェアボタン

データを考えます。

class Post {
  const Post({
    required this.userName,
    required this.body,
    required this.likes,
    required this.comments,
  });

  final String userName;
  final String body;
  final int likes;
  final int comments;
}

Widgetに分けます。

TimelinePage
├─ PostCard
├─ UserAvatar
├─ PostBody
├─ ReactionBar
└─ CommentSheet

状態を考えます。

いいね済み投稿
コメント一覧
シェア済み投稿

これは、TikTok風アプリの構造とかなり似ています。

「どんなアプリでも同じ流れ」とはどういう意味か

もちろん、アプリごとに使う機能は違います。

動画アプリでは video_player を使いました。

地図アプリなら地図のパッケージを使うかもしれません。

チャットアプリならWebSocketやFirebaseを使うかもしれません。

しかし、基本の考え方は同じです。

画面を分解する
データを設計する
Widgetに分ける
状態を管理する
操作で状態を変える
必要な機能を追加する

つまり、アプリごとに違うのは「部品の中身」です。

でも、作り方の流れは大きく変わりません。

TikTok風アプリ
↓
動画・スワイプ・コメント

商品アプリ
↓
商品・お気に入り・カート

予約アプリ
↓
日付・時間・予約

学習アプリ
↓
講座・進捗・完了

見た目やテーマが違っても、考える順番は同じです。

自信につながる考え方

初心者のうちは、完成アプリを見ると「自分には作れない」と感じることがあります。

しかし、完成アプリも、最初は小さな部品から始まっています。

Textを置く
Iconを置く
Columnで並べる
Stackで重ねる
classでデータを作る
Listで複数持つ
builderで表示する
setStateで変える

1つずつは、これまで学んできた内容です。

大切なのは、完成形を見て圧倒されるのではなく、分解することです。

難しそう
↓
どんな部品に分けられるか考える

複雑そう
↓
どんなデータが必要か考える

動きが多そう
↓
どんな状態が変わっているか考える

このように見られるようになると、アプリ開発はかなり怖くなくなります。

アプリを作るときのチェックリスト

今後、別のアプリを作るときは、次のチェックリストを使えます。

1. 画面を観察する

この画面には何があるか
どこに何が配置されているか
ユーザーは何を操作するか

2. 部品に分ける

ヘッダー
カード
ボタン
一覧
入力欄
モーダル
下部ナビ

3. データを考える

1件分のデータには何が必要か
文字は何か
数字は何か
画像や動画URLは必要か
状態は必要か

4. classを作る

Product
Post
Lesson
Reservation
Message
ShortVideo

5. Listで複数データを持つ

products
posts
lessons
reservations
messages
videos

6. builderで表示する

ListView.builder
GridView.builder
PageView.builder

7. 状態を考える

選択中か
いいね済みか
入力中か
読み込み中か
完了済みか
保存済みか

8. 操作を考える

タップしたら何が変わるか
入力したら何が変わるか
送信したら何が追加されるか
スワイプしたら何が切り替わるか

役割ごとに名前をつける
長すぎるWidgetを分ける
同じ形のUIを共通化する

10. 最後に整理する

読みにくい場所はないか
同じコードを繰り返していないか
状態の場所は自然か
Widget名は分かりやすいか

このチェックリストを使うと、どんなアプリでも同じ流れで考えやすくなります。

この章で大切だったコードの型

第4章で何度も出てきた重要な形を振り返ります。

アプリの入口

void main() {
  runApp(const MyApp());
}

アプリ全体

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

データclass

class Item {
  const Item({
    required this.title,
    required this.description,
  });

  final String title;
  final String description;
}

Listデータ

const items = [
  Item(
    title: 'タイトル1',
    description: '説明1',
  ),
  Item(
    title: 'タイトル2',
    description: '説明2',
  ),
];

builderで表示

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

    return ItemCard(item: item);
  },
)

状態を変える

setState(() {
  isActive = !isActive;
});

親から子にデータを渡す

ItemCard(item: item)

class ItemCard extends StatelessWidget {
  const ItemCard({
    super.key,
    required this.item,
  });

  final Item item;

  @override
  Widget build(BuildContext context) {
    return Text(item.title);
  }
}

この型を覚えると、別のアプリでも応用しやすくなります。

最後に：アプリは一気に完成させなくていい

この章で一番伝えたいことは、アプリは一気に完成させなくていいということです。

むしろ、いきなり完成形を作ろうとすると、どこから手をつければよいか分からなくなります。

今回のTikTok風アプリも、最初はとても小さく始めました。

黒背景を作る
↓
文字を置く
↓
Stackで重ねる
↓
データを作る
↓
PageViewで切り替える
↓
動画を再生する
↓
ボタンを作る
↓
状態を変える
↓
コメント欄を作る
↓
Widgetを整理する

これなら、1つずつ理解できます。

完成アプリは、たくさんの小さな理解の積み重ねです。

小さく作る
↓
動かして確認する
↓
少し機能を足す
↓
また確認する

この進め方を身につけると、どんなアプリでも作り始める勇気が出ます。

この節の確認問題

確認問題1

アプリを作るとき、最初にするべきことは何ですか。

答え

作りたい画面を観察し、どんな部品でできているかを分解することです。

確認問題2

画面に表示する情報は、どのように整理すると扱いやすくなりますか。

答え

classを使って、1件分のデータとして整理すると扱いやすくなります。

確認問題3

複数のデータを表示するときによく使う組み合わせは何ですか。

答え

List と builder を組み合わせます。

たとえば、ListView.builder や PageView.builder を使います。

確認問題4

ユーザー操作で画面を変えるには、何が必要ですか。

答え

状態を持ち、その状態を setState で変更して画面を更新します。

確認問題5

Widgetを分割する理由は何ですか。

答え

コードを読みやすくし、役割ごとに整理し、修正や再利用をしやすくするためです。

確認問題6

親Widgetと子Widgetの関係で大切なことは何ですか。

答え

親Widgetが状態や処理を持ち、子Widgetに必要なデータや関数を渡すことです。

子Widgetは表示に集中します。

確認問題7

TikTok風アプリで学んだ流れは、他のアプリにも応用できますか。

答え

できます。

画面を分解し、データを設計し、Widgetに分け、状態を管理し、ユーザー操作で更新するという流れは、多くのアプリで共通しています。

第4章のまとめ

第4章では、TikTok風アプリを題材に、Flutterの画面を「部品」と「構造」で作る考え方を学びました。

この章で学んだことは、次の通りです。

Flutterの画面はWidgetでできている
MaterialAppとScaffoldでアプリの土台を作る
Stackで動画の上にUIを重ねる
classで動画データを設計する
PageView.builderで縦スワイプを作る
video_playerで動画を再生する
%で無限スクロール風に見せる
RightActionBarを部品化する
setStateでいいね・保存・共有の状態を変える
BottomSheetでコメント欄を表示する
TextFieldでコメントを入力する
BottomVideoInfoで投稿情報を表示する
Widgetを分割して読みやすいコードに整える
完成コードを役割ごとに読み解く

そして、最も大切なのは、次の考え方です。

どんなアプリでも、
画面を観察し、
データを設計し、
Widgetに分け、
状態を管理し、
小さく動かしながら作ればよい。

これが分かると、アプリ開発は「何をすればいいか分からないもの」ではなくなります。

次に作るアプリでも、この流れを思い出してください。

画面を見る
↓
部品に分ける
↓
データを考える
↓
Widgetを作る
↓
状態を持つ
↓
操作で変える
↓
少しずつ完成に近づける

この流れで進めれば、TikTok風アプリだけでなく、商品一覧、予約、SNS、学習、在庫管理など、さまざまなアプリを作る土台になります。

参考文献

Flutter documentation, “Introduction to widgets”
Flutter documentation, “Building layouts”
Flutter documentation, “StatefulWidget class”
Flutter documentation, “ListView class”
Flutter documentation, “PageView class”
Flutter documentation, “showModalBottomSheet function”
Flutter cookbook, “Use lists”
Flutter cookbook, “Manage focus in text fields”
video_player package documentation, “video_player”