Flutterアプリケーション開発概論

【導入】NETFLIX風アプリを動かして、完成形の全体像をつかむ

第1節NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

この節で学ぶこと

この節では、まず完成した NETFLIX風アプリ を実際に動かして、「このアプリでは何ができるのか」「どんな画面があるのか」「これから何を学んでいくのか」を確認します。

いきなりコードを1行ずつ理解しようとすると、正直かなり大変です。

アプリ開発で最初に大切なのは、完成形を見てどのように作れるのか考えてみることです。

「この画面、どうやって作っているんだろう？」

「下のタブを押すと画面が変わるのはなぜ？」

「検索したら作品が絞り込まれるのはどういう仕組み？」

このように、まずは完成アプリを触りながら、これから学んでいきましょう。

まずは完成アプリを動かしてみよう

今回作るのは、動画配信アプリ風のUIを持つFlutterアプリです。

名前は教材用に NETAFLIX としています。

実際の動画配信アプリのように、黒をベースにした画面、赤いアクセント、作品一覧、検索、縦スクロールのClips画面、YouTube再生、共有機能などを組み込んでいます。

ただし、これは本物のサービスではなく、授業用・学習用のモックアプリです。

モックアプリとは、「本番サービスそのものではないけれど、見た目や動きの練習をするためのアプリ」のことです。

完成アプリでできること

このアプリでは、主に次のような機能を確認できます。

画面・機能内容
Splash画面アプリ起動時にロゴと説明文を表示する
Home画面大きな背景画像、作品一覧、カテゴリタブを表示する
Clips画面縦スクロールで作品を切り替える
Search画面入力した文字で作品を検索する
My Netaflix画面プロフィールや視聴中リスト風の画面を表示する
作品詳細画面作品説明、Like、Share、YouTube再生ボタンを表示する
YouTube再生作品の動画をアプリ内で再生する
Share機能iOSの共有画面を表示する
アプリアイコンicon.png をホーム画面アイコンとして設定する

こうして見ると、かなり本格的に見えます。

でも安心してください。

この教材では、最初から全部を自分で書くのではなく、完成コードを使って、一部分だけ変更しながら理解する 進め方にします。

この教材の進め方

この教材では、毎回ほぼ同じ流れで進みます。

完成コードを使う
↓
一部分だけ変更する
↓
保存する
↓
画面の変化を見る
↓
チャレンジ問題に挑戦する
↓
次のステップへ進む

この流れにすると、コードが苦手な人でも進めやすくなります。

なぜなら、いきなり全部を覚える必要がないからです。

最初は、

fontSize: 30,

を

fontSize: 40,

に変えるだけでも十分です。

たったこれだけでも、画面の文字が大きくなります。

画面を変えるための指示書です。

完成アプリの画面構成

今回のアプリには、大きく分けて4つのメイン画面があります。

下部のナビゲーションバーから切り替えます。

Home
Clips
Search
My Netaflix

それぞれの役割を見ていきましょう。

Home画面

Home画面は、アプリの顔になる画面です。

最初に表示される大きな背景画像、中央のロゴ、作品タイトル、Playボタン、Infoボタン、そして横スクロールの作品一覧があります。

この画面では、次のようなFlutterの考え方を使っています。

使っている考え方何に使っているか
Stack背景画像の上に文字やボタンを重ねる
Positionedロゴやボタンの位置を指定する
Image.networkインターネット上の画像を表示する
LinearGradient画像の上に黒いグラデーションをかける
ListView.separated横スクロールの作品一覧を作る

ここで特に大切なのは、Stack です。

普通の Column や Row は、上から下、左から右に並べるためのものです。

しかし、Home画面では背景画像の上にロゴやボタンを重ねています。

そのようなときに使うのが Stack です。

Clips画面

Clips画面は、縦にスワイプして作品を切り替える画面です。

ショート動画アプリのように、1画面に1作品を大きく表示します。

ここでは、次のようなFlutterの考え方を使っています。

使っている考え方何に使っているか
PageView.builder縦スクロールで画面を切り替える
PageController最初に表示するページを管理する
% movies.length無限ループ風に作品を繰り返す
Set<int>Like済み・保存済みの番号を管理する
GestureDetectorボタンをタップできるようにする

Clips画面の面白いところは、作品が無限にあるように見せている点です。

実際には作品データは数個しかありません。

でも、ページ番号を作品数で割った余りを使うことで、同じ作品を繰り返し表示できます。

例えば作品が6個ある場合、

0, 1, 2, 3, 4, 5, 0, 1, 2, 3...

のように表示できます。

これはプログラミングらしい考え方です。

少ないデータでも、見せ方を工夫すれば、豊かなUIに見せることができます。

Search画面

Search画面では、TextFieldに文字を入力すると、作品一覧が絞り込まれます。

例えば、

dark

と入力すると、タイトルや説明文に dark が含まれる作品が表示されます。

ここでは、次のようなFlutterの考え方を使っています。

使っている考え方何に使っているか
TextField文字を入力する
TextEditingController入力欄を管理する
onChanged入力されるたびに処理を実行する
where条件に合う作品だけ取り出す
setState検索結果を画面に反映する

検索機能は、アプリ開発でとてもよく出てきます。

ECサイトの商品検索、SNSのユーザー検索、病院サイトの診療メニュー検索など、いろいろな場所で使えます。

つまり、このSearch画面は、動画アプリだけでなく、他のアプリ制作にも応用できます。

My Netaflix画面

My Netaflix画面は、プロフィールや通知、ダウンロード、視聴中リストのような情報を表示する画面です。

ここでは、次のようなUIの作り方を学べます。

使っている考え方何に使っているか
AppBar上部タイトルを表示する
ClipRRect画像を角丸にする
ListView縦にスクロールできる画面を作る
ContainerカードUIを作る
Row / Columnアイコン・文字・説明文を並べる

Myページは、どんなアプリにもよくあります。

ユーザー情報、設定、通知、保存済みコンテンツなどを表示する画面です。

今回の内容を理解すると、プロフィール画面や管理画面のUIにも応用できます。

作品詳細画面

作品カードをタップすると、作品詳細画面に移動します。

この画面では、作品の背景画像、タイトル、説明文、年齢制限、Likeボタン、Shareボタン、YouTube再生ボタンなどが表示されます。

ここで学ぶ内容はかなり重要です。

使っている考え方何に使っているか
Navigator.push別画面へ移動する
MovieItem movieタップした作品データを詳細画面に渡す
setStateLikeやMy Listの状態を切り替える
share_plusiOS共有画面を表示する
youtube_player_iframeYouTube動画を再生する

特に大事なのは、作品データを次の画面に渡す という考え方です。

アプリではよく、

一覧画面で選ぶ
↓
詳細画面で詳しく見る

という流れがあります。

これはニュースアプリ、商品一覧アプリ、予約アプリ、学習アプリなど、ほとんどのアプリで使われます。

今回の完成コードで一番大切な考え方

今回のコードは長いです。

でも、考え方としては次の5つに分けられます。

1. データを用意する
2. 画面を作る
3. ボタンを押したら状態を変える
4. 画面を切り替える
5. 外部機能を使う

もう少し具体的にすると、こうです。

考え方今回のアプリでの例
データを用意するMovieItem と movies
画面を作るHome、Clips、Search、My Netaflix
状態を変えるLike、My List、検索キーワード
画面を切り替えるBottomNavigationBar、Navigator
外部機能を使うYouTube再生、Share、SVGロゴ、アプリアイコン

つまり、アプリ開発は「全部を一気に作るもの」ではありません。

小さな部品を作って、それを組み合わせていくものです。

まず変更してみる場所

最初のカスタマイズとしておすすめなのは、文字の変更です。

例えば、SplashScreen の中にあるこの文章を見つけてください。

'このアプリは授業の一環で作成しました。'

これを次のように変更してみます。

'Flutterの授業で作った動画アプリ風モックです。'

保存して、画面を確認してください。

スプラッシュ画面の文字が変わっていれば成功です。

次に変更してみる場所

次は、BottomNavigationBarの文字を変えてみましょう。

現在はこのようになっています。

const BottomNavEntry(icon: Icons.person_rounded, label: 'My Netaflix'),

これを次のように変えてみます。

const BottomNavEntry(icon: Icons.person_rounded, label: 'My Page'),

保存して、画面を確認してください。

下のメニューの文字が変わります。

ここで大切なのは、コードを変えると画面が変わる という感覚です。

この感覚がつかめると、アプリ開発が一気に楽しくなります。

画面の変化を見るときのポイント

コードを変更したら、すぐに画面を確認します。

見るべきポイントは3つです。

確認ポイント内容
変更した場所自分が変えた文字や色が反映されているか
関係ない場所他の画面が壊れていないか
エラー表示赤いエラー画面やターミナルのエラーが出ていないか

アプリ開発では、「変更する → 確認する」を何度も繰り返します。

一度で完璧に作る必要はありません。

小さく変えて、小さく確認する。

これがとても大切です。

よくある不安

Q. コードが長すぎて、全部理解できる気がしません。

大丈夫です。

最初から全部理解しようとしなくてよいです。

まずは、「このクラスはHome画面」「このクラスは検索画面」「このクラスは作品データ」というように、大まかな役割だけ分かれば十分です。

Q. どこを変更すればよいか分かりません。

最初は文字列を探すのがおすすめです。

例えば、

'My Netaflix'

のように ' で囲まれている文字は、画面に表示されることが多いです。

まずは表示文字を変更して、画面がどう変わるか試してみましょう。

Q. エラーが出たらどうすればいいですか。

エラーが出たら、まずは直前に変更した場所を見直します。

特によくあるのは次のミスです。

よくあるミス例
カンマ忘れlabel: 'Home' の後に , がない
クォーテーション忘れ'Home のように閉じていない
かっこ不足) や } が足りない
インデント崩れYAMLの空白がずれている
ファイルパス間違いassets/images/logo.svg が存在しない

エラーは失敗ではありません。

エラーは、コンピューターからの「ここを見直してね」というメッセージです。

チャレンジ

ここまで読んだら、実際に少しだけ改造してみましょう。

チャレンジ1：スプラッシュ画面の説明文を変える

以下の文章を探してください。

'このアプリは授業の一環で作成しました。'

好きな文章に変更してみましょう。

例：

'Flutterで作った動画アプリ風UIです。'

チャレンジ2：アプリのタイトルを変える

MaterialApp の中にあるこの部分を探します。

title: 'NETAFLIX',

これを好きな名前に変えてみましょう。

例：

title: 'MOVIE LAB',

チャレンジ3：下部ナビゲーションの文字を変える

この部分を探します。

const BottomNavEntry(icon: Icons.person_rounded, label: 'My Netaflix'),

例えば、こう変えてみます。

const BottomNavEntry(icon: Icons.person_rounded, label: 'My Page'),

チャレンジの答え

チャレンジ1の答え

変更前：

'このアプリは授業の一環で作成しました。'

変更後の例：

'Flutterで作った動画アプリ風UIです。'

スプラッシュ画面のロゴ下に表示される文章が変わります。

チャレンジ2の答え

変更前：

title: 'NETAFLIX',

変更後の例：

title: 'MOVIE LAB',

これはアプリ内部のタイトルとして使われます。

画面に大きく表示されるものではありませんが、アプリ設定として重要です。

チャレンジ3の答え

変更前：

const BottomNavEntry(icon: Icons.person_rounded, label: 'My Netaflix'),

変更後の例：

const BottomNavEntry(icon: Icons.person_rounded, label: 'My Page'),

アプリ下部のタブ名が変わります。

この節のまとめ

この節では、NETFLIX風アプリの完成形を確認し、アプリ全体の構成をつかみました。

重要なポイントは次の通りです。

  • 完成コードを先に動かすことで、学ぶ目的が見えやすくなる。
  • このアプリには Home / Clips / Search / My Netaflix の4つのメイン画面がある。
  • 作品データは MovieItem と movies で管理している。
  • 画面切り替えには BottomNavigationBar を使っている。
  • YouTube再生、共有、検索、アプリアイコンなど、実践的な機能が入っている。
  • 最初は文字変更など、小さなカスタマイズから始めると理解しやすい。

次のステップ

次の節では、pubspec.yaml を見ながら、アプリに必要なパッケージと画像素材の登録方法を学びます。

特に、

youtube_player_iframe
flutter_svg
share_plus
flutter_launcher_icons
assets/images/

がどのような役割を持っているのかを確認します。

次の節【完成コードの使い方】pubspec.yaml・main.dart・画像素材を準備する
教材トップへ戻る