MaterialAppとScaffoldでアプリの土台を作る | 【Flutter】TikTokのUIから学ぶ画面構築。画面を「部品」と「構造」で組み立てる。 | Flutterアプリケーション開発概論

この節で学ぶこと

前回の 4-2 では、Flutterの画面は Widget という部品を組み合わせて作られていることを学びました。

今回の 4-3 では、Flutterアプリの土台になる MaterialApp と Scaffold を学びます。

TikTok風アプリを作るときも、いきなり動画やボタンを置くのではなく、まずアプリ全体の土台を作ります。

この節では、次のような黒背景の全画面アプリを作ります。

まだ動画は再生しません。

まだいいねボタンも作りません。

まずは、Flutterアプリがどのような構造で起動し、どのWidgetが画面の土台になるのかを理解します。

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

MaterialAppはアプリ全体の設定、Scaffoldは1画面の土台を作るWidgetである。

まずFlutterアプリの基本構造を見る

Flutterアプリは、基本的に次の流れで起動します。

main
↓
runApp
↓
MaterialApp
↓
home
↓
Scaffold
↓
body

これだけ見ると少し難しく感じるかもしれません。

しかし、1つずつ分けるとシンプルです。

部分	役割
`main`	プログラムのスタート地点
`runApp`	Flutterアプリを起動する
`MaterialApp`	アプリ全体の基本設定
`home`	最初に表示する画面
`Scaffold`	1画面の土台
`body`	画面の中身

TikTok風アプリも、この基本構造の上に作っていきます。

新しい言葉：mainとは何か

main は、Dartプログラムのスタート地点です。

Flutterアプリでも、最初に実行されるのは main です。

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

このコードは、次のように読めます。

アプリが始まったら、
TikTokLikeVideoAppを画面に表示してください。

main は、アプリの入口です。

どんなFlutterアプリでも、基本的にはここから始まります。

新しい言葉：runAppとは何か

runApp は、Flutterアプリを起動するための関数です。

runApp(const TikTokLikeVideoApp());

これは、次の意味です。

TikTokLikeVideoAppというWidgetを、アプリとして動かしてください。

Flutterでは、アプリ全体もWidgetです。

そのため、runApp に一番外側のWidgetを渡します。

今回の場合は、TikTokLikeVideoApp を渡しています。

runApp
└─ TikTokLikeVideoApp

新しい言葉：MaterialAppとは何か

MaterialApp は、Flutterアプリ全体の基本設定をするWidgetです。

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: ShortVideoHomePage(),
)

MaterialApp では、次のような設定ができます。

設定	意味
`debugShowCheckedModeBanner`	右上のDEBUG表示を出すかどうか
`home`	最初に表示する画面
`theme`	アプリ全体の色やデザイン
`title`	アプリ名
`routes`	画面遷移の設定

今回は、まず次の2つだけ理解すれば大丈夫です。

debugShowCheckedModeBanner: false,
home: ShortVideoHomePage(),

debugShowCheckedModeBannerとは何か

DartPadや開発中のFlutterアプリでは、画面右上に DEBUG という帯が出ることがあります。

それを消すために、次の設定を使います。

debugShowCheckedModeBanner: false,

初心者向けには、次のように覚えておけば大丈夫です。

debugShowCheckedModeBanner: false
↓
右上のDEBUG表示を消す設定

TikTok風アプリでは、画面をアプリらしく見せたいので、この設定を入れておきます。

homeとは何か

home は、アプリを開いたときに最初に表示する画面です。

home: ShortVideoHomePage(),

これは、次の意味です。

アプリを起動したら、
ShortVideoHomePageを最初に表示する。

今回のアプリでは、ShortVideoHomePage がTikTok風動画一覧のメイン画面になります。

MaterialApp
└─ home: ShortVideoHomePage

新しい言葉：Scaffoldとは何か

Scaffold は、1画面の土台を作るWidgetです。

Scaffold(
  backgroundColor: Colors.black,
  body: Center(
    child: Text('TikTok風アプリの土台'),
  ),
)

Scaffold は、画面の基本的な構造を作るために使います。

たとえば、次のような場所を作れます。

Scaffoldの場所	役割
`appBar`	上部のバー
`body`	画面の中心部分
`bottomNavigationBar`	下部ナビゲーション
`floatingActionButton`	浮いているボタン
`backgroundColor`	画面背景色

今回のTikTok風アプリでは、一般的な上部バーは使いません。

動画を全画面に表示したいため、主に body を使います。

bodyとは何か

body は、Scaffoldの中で、画面の中心部分を表します。

Scaffold(
  body: Center(
    child: Text('TikTok風アプリの土台'),
  ),
)

これは、次のような構造です。

Scaffold
└─ body
   └─ Center
      └─ Text

TikTok風アプリでは、この body の中に、動画背景、右側ボタン、下部テキストなどを置いていきます。

Scaffold
└─ body
   └─ TikTok風の画面全体

TikTok風アプリではなぜ黒背景にするのか

今回のアプリでは、Scaffoldの背景を黒にします。

backgroundColor: Colors.black,

理由は、TikTok風のショート動画UIでは、動画が主役だからです。

背景が白いと、動画や白い文字が見づらくなります。

黒背景にすると、動画・白文字・アイコンが目立ちやすくなります。

黒背景
↓
動画が目立つ
白文字が読みやすい
アプリっぽく見える

もちろん、実際のTikTok画面は動画が背景全体に広がります。

しかし、動画を置く前の段階では、まず黒背景の土台を作っておくと分かりやすいです。

この節で作る最小アプリ

ここから実際にコードを書きます。

DartPadに次のコードを貼り付けてください。

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Text(
          'TikTok風アプリの土台',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

実行結果

実行すると、黒い画面の中央に白い文字が表示されます。

TikTok風アプリの土台

この時点では、とてもシンプルです。

しかし、このコードにはFlutterアプリの重要な基本構造がすべて入っています。

main
↓
runApp
↓
MaterialApp
↓
home
↓
Scaffold
↓
body
↓
Text

これが、これから作るTikTok風アプリの土台です。

コードを1行ずつ見る

import

import 'package:flutter/material.dart';

これは、Flutterの基本的なWidgetを使うための読み込みです。

MaterialApp、Scaffold、Text、Colors などを使うには、このimportが必要です。

material.dartを読み込む
↓
Flutterの基本Widgetが使える

main

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

main は、アプリのスタート地点です。

runApp によって、TikTokLikeVideoApp がアプリとして表示されます。

TikTokLikeVideoApp

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

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

TikTokLikeVideoApp は、アプリ全体の入口になるWidgetです。

ここでは、MaterialApp を返しています。

TikTokLikeVideoApp
└─ MaterialApp

このWidget自体は、状態が変化しないため、StatelessWidget を使っています。

StatelessWidgetとは何か

StatelessWidget は、状態を持たないWidgetです。

状態とは、ユーザー操作などで変わる値のことです。

たとえば、次のようなものが状態です。

いいねしているかどうか
今何番目の動画を見ているか
コメントが何件あるか
動画が再生中か停止中か

今作っている土台画面では、まだそういった変化はありません。

そのため、StatelessWidget で十分です。

buildメソッド

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

build メソッドは、Widgetの見た目を作る場所です。

この場合、TikTokLikeVideoApp の見た目は MaterialApp です。

初心者向けには、次のように覚えてください。

buildメソッドは、画面に何を表示するかを返す場所

ShortVideoHomePage

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Text(
          'TikTok風アプリの土台',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

ShortVideoHomePage は、最初に表示される画面です。

ここでは、Scaffold を返しています。

ShortVideoHomePage
└─ Scaffold
   └─ body
      └─ Center
         └─ Text

この構造が、1画面の基本になります。

Scaffoldの中身を見る

return const Scaffold(
  backgroundColor: Colors.black,
  body: Center(
    child: Text(
      'TikTok風アプリの土台',
      style: TextStyle(
        color: Colors.white,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

ここで、背景色を黒にしています。

backgroundColor: Colors.black,

そして、body に Center を置いています。

body: Center(
  child: Text(...),
),

Center は、中のWidgetを中央に置くWidgetです。

Text は、文字を表示するWidgetです。

TextStyleで文字を整える

style: TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
),

TextStyle は、文字の見た目を整えるための設定です。

設定	意味
`color`	文字色
`fontSize`	文字サイズ
`fontWeight`	文字の太さ

ここでは、白色で、少し大きく、太い文字にしています。

TikTok風アプリでは、動画の上に白い文字を重ねることが多いので、ここで白文字の扱いに慣れておきます。

constとは何か

今回のコードには、const が何度も出てきます。

runApp(const TikTokLikeVideoApp());

return const MaterialApp(

return const Scaffold(

const は、簡単に言うと「最初から変わらない固定のWidgetや値」に使います。

初心者向けには、まず次のように理解しておけば大丈夫です。

const = 変わらないものにつける印

今回のように、表示内容が固定されているWidgetには const をつけられます。

ただし、今後、いいねの状態や動画の再生状態など、変化する値を扱うときは、すべてに const をつけられるわけではありません。

最初は、エディタが const を提案したらつける、くらいの理解で大丈夫です。

TikTok風アプリの土台として見る

今回作ったコードを、TikTok風アプリの土台として見てみます。

TikTokLikeVideoApp
└─ MaterialApp
   └─ ShortVideoHomePage
      └─ Scaffold
         └─ body

この body の中に、今後いろいろな部品を入れていきます。

body
├─ 動画背景
├─ 上部ナビ
├─ 右側ボタン
├─ 下部テキスト
└─ コメント欄を開く仕組み

つまり、今はまだ文字だけですが、構造としてはすでにTikTok風アプリの入口ができています。

次の段階では何をするのか

今は、body に Center と Text だけを置いています。

body: Center(
  child: Text('TikTok風アプリの土台'),
),

次の段階では、この body を Stack に置き換えます。

body: Stack(
  children: [
    動画背景,
    上部ナビ,
    右側ボタン,
    下部情報,
  ],
),

TikTok風UIは、動画の上に文字やボタンが重なっているため、Stack が重要になります。

つまり、今回の節は、次の準備です。

MaterialAppでアプリ全体を作る
↓
Scaffoldで画面の土台を作る
↓
次にStackでTikTok風レイアウトを作る

手を動かす練習1：背景色を変える

次の部分を探してください。

backgroundColor: Colors.black,

これを次のように変えてみてください。

backgroundColor: Colors.deepPurple,

画面背景が紫色になります。

この練習で分かることは、Scaffold の backgroundColor が画面全体の背景色を決めているということです。

手を動かす練習2：表示文字を変える

次の部分を探してください。

'TikTok風アプリの土台'

これを次のように変えてみてください。

'ショート動画アプリを作る'

実行すると、中央の文字が変わります。

この練習で、Text の中の文字が画面に表示されることを確認できます。

手を動かす練習3：文字サイズを変える

次の部分を探してください。

fontSize: 24,

これを次のように変えてみてください。

fontSize: 32,

文字が大きくなります。

TextStyle の fontSize は、文字サイズを決める設定です。

手を動かす練習4：太字をやめる

次の部分を探してください。

fontWeight: FontWeight.bold,

これを削除してみてください。

文字の太さが通常になります。

文字の印象が変わることを確認してください。

よくあるつまずき1：MaterialAppとScaffoldの違いが分からない

初心者がよく混乱するのが、MaterialApp と Scaffold の違いです。

簡単にいうと、次の違いです。

Widget	役割
`MaterialApp`	アプリ全体の設定
`Scaffold`	1画面の土台

たとえるなら、MaterialApp はアプリ全体の建物です。

Scaffold は、その中の1つの部屋です。

MaterialApp
└─ Scaffold
   └─ body

まずは、この親子関係を覚えてください。

よくあるつまずき2：homeとbodyの違いが分からない

home は、アプリを起動したときに最初に表示する画面です。

home: ShortVideoHomePage(),

body は、Scaffoldの中身です。

body: Center(...),

整理すると、次のようになります。

書き方	意味
`home`	アプリの最初の画面
`body`	その画面の中身

構造で見ると、こうです。

MaterialApp
└─ home: ShortVideoHomePage
   └─ Scaffold
      └─ body

よくあるつまずき3：buildメソッドが何をしているか分からない

build は、そのWidgetが何を表示するかを返す場所です。

@override
Widget build(BuildContext context) {
  return const Text('Hello');
}

この場合、このWidgetは Text('Hello') を表示します。

難しく考えすぎず、最初は次のように覚えてください。

buildのreturnに書いたWidgetが画面に表示される

よくあるつまずき4：constをどこにつけるか分からない

const は、変わらないWidgetや値に使えます。

しかし、最初から完璧に理解しようとしなくても大丈夫です。

まずは、次の方針で進めましょう。

エディタがconstを提案したらつける
エラーになるなら外す
状態が変わるWidgetではconstを外すことがある

この章の後半では、いいねやコメントなど、状態が変わる画面を作ります。

そのときは、const を外す場面も出てきます。

この節の確認問題

確認問題1

main は何をする場所ですか。

答え

Dartプログラムのスタート地点です。

Flutterアプリでは、ここから runApp を呼び出してアプリを起動します。

確認問題2

runApp は何をする関数ですか。

答え

指定したWidgetをFlutterアプリとして起動する関数です。

確認問題3

MaterialApp は何のために使いますか。

答え

アプリ全体の基本設定をするために使います。

最初に表示する画面を home で指定できます。

確認問題4

Scaffold は何のために使いますか。

答え

1画面の土台を作るために使います。

背景色や画面の中身である body を設定できます。

確認問題5

home と body の違いは何ですか。

答え

home は、アプリを起動したときに最初に表示する画面です。

body は、Scaffoldの中に表示する画面の中身です。

確認問題6

TikTok風アプリで背景色を黒にする理由は何ですか。

答え

動画や白い文字、アイコンを目立たせるためです。

動画を主役にしたUIでは、黒背景が見やすくなります。

この節のまとめ

この節では、Flutterアプリの土台である MaterialApp と Scaffold を学びました。

Flutterアプリは、次のような流れで起動します。

main
↓
runApp
↓
MaterialApp
↓
home
↓
Scaffold
↓
body

MaterialApp は、アプリ全体の設定をするWidgetです。

Scaffold は、1画面の土台を作るWidgetです。

今回のTikTok風アプリでは、まず黒背景の全画面アプリを作りました。

まだ動画もボタンもありませんが、この土台があるからこそ、次の節から画面を重ねて作っていくことができます。

この節のポイント：
- mainはアプリのスタート地点
- runAppでFlutterアプリを起動する
- MaterialAppはアプリ全体の設定
- homeは最初に表示する画面
- Scaffoldは1画面の土台
- bodyは画面の中身
- TikTok風アプリでは黒背景の土台を作る

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

Flutterアプリは、MaterialAppで全体を作り、Scaffoldで1画面の土台を作るところから始まる。

次の節では、Stack を使って、動画の上に文字やボタンを重ねるTikTok風レイアウトを作っていきます。

この節で学ぶこと

前回の 4-2 では、Flutterの画面は Widget という部品を組み合わせて作られていることを学びました。

今回の 4-3 では、Flutterアプリの土台になる MaterialApp と Scaffold を学びます。

TikTok風アプリを作るときも、いきなり動画やボタンを置くのではなく、まずアプリ全体の土台を作ります。

この節では、次のような黒背景の全画面アプリを作ります。

まだ動画は再生しません。

まだいいねボタンも作りません。

まずは、Flutterアプリがどのような構造で起動し、どのWidgetが画面の土台になるのかを理解します。

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

MaterialAppはアプリ全体の設定、Scaffoldは1画面の土台を作るWidgetである。

まずFlutterアプリの基本構造を見る

Flutterアプリは、基本的に次の流れで起動します。

main
↓
runApp
↓
MaterialApp
↓
home
↓
Scaffold
↓
body

これだけ見ると少し難しく感じるかもしれません。

しかし、1つずつ分けるとシンプルです。

部分	役割
`main`	プログラムのスタート地点
`runApp`	Flutterアプリを起動する
`MaterialApp`	アプリ全体の基本設定
`home`	最初に表示する画面
`Scaffold`	1画面の土台
`body`	画面の中身

TikTok風アプリも、この基本構造の上に作っていきます。

新しい言葉：mainとは何か

main は、Dartプログラムのスタート地点です。

Flutterアプリでも、最初に実行されるのは main です。

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

このコードは、次のように読めます。

アプリが始まったら、
TikTokLikeVideoAppを画面に表示してください。

main は、アプリの入口です。

どんなFlutterアプリでも、基本的にはここから始まります。

新しい言葉：runAppとは何か

runApp は、Flutterアプリを起動するための関数です。

runApp(const TikTokLikeVideoApp());

これは、次の意味です。

TikTokLikeVideoAppというWidgetを、アプリとして動かしてください。

Flutterでは、アプリ全体もWidgetです。

そのため、runApp に一番外側のWidgetを渡します。

今回の場合は、TikTokLikeVideoApp を渡しています。

runApp
└─ TikTokLikeVideoApp

新しい言葉：MaterialAppとは何か

MaterialApp は、Flutterアプリ全体の基本設定をするWidgetです。

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: ShortVideoHomePage(),
)

MaterialApp では、次のような設定ができます。

設定	意味
`debugShowCheckedModeBanner`	右上のDEBUG表示を出すかどうか
`home`	最初に表示する画面
`theme`	アプリ全体の色やデザイン
`title`	アプリ名
`routes`	画面遷移の設定

今回は、まず次の2つだけ理解すれば大丈夫です。

debugShowCheckedModeBanner: false,
home: ShortVideoHomePage(),

debugShowCheckedModeBannerとは何か

DartPadや開発中のFlutterアプリでは、画面右上に DEBUG という帯が出ることがあります。

それを消すために、次の設定を使います。

debugShowCheckedModeBanner: false,

初心者向けには、次のように覚えておけば大丈夫です。

debugShowCheckedModeBanner: false
↓
右上のDEBUG表示を消す設定

TikTok風アプリでは、画面をアプリらしく見せたいので、この設定を入れておきます。

homeとは何か

home は、アプリを開いたときに最初に表示する画面です。

home: ShortVideoHomePage(),

これは、次の意味です。

アプリを起動したら、
ShortVideoHomePageを最初に表示する。

今回のアプリでは、ShortVideoHomePage がTikTok風動画一覧のメイン画面になります。

MaterialApp
└─ home: ShortVideoHomePage

新しい言葉：Scaffoldとは何か

Scaffold は、1画面の土台を作るWidgetです。

Scaffold(
  backgroundColor: Colors.black,
  body: Center(
    child: Text('TikTok風アプリの土台'),
  ),
)

Scaffold は、画面の基本的な構造を作るために使います。

たとえば、次のような場所を作れます。

Scaffoldの場所	役割
`appBar`	上部のバー
`body`	画面の中心部分
`bottomNavigationBar`	下部ナビゲーション
`floatingActionButton`	浮いているボタン
`backgroundColor`	画面背景色

今回のTikTok風アプリでは、一般的な上部バーは使いません。

動画を全画面に表示したいため、主に body を使います。

bodyとは何か

body は、Scaffoldの中で、画面の中心部分を表します。

Scaffold(
  body: Center(
    child: Text('TikTok風アプリの土台'),
  ),
)

これは、次のような構造です。

Scaffold
└─ body
   └─ Center
      └─ Text

TikTok風アプリでは、この body の中に、動画背景、右側ボタン、下部テキストなどを置いていきます。

Scaffold
└─ body
   └─ TikTok風の画面全体

TikTok風アプリではなぜ黒背景にするのか

今回のアプリでは、Scaffoldの背景を黒にします。

backgroundColor: Colors.black,

理由は、TikTok風のショート動画UIでは、動画が主役だからです。

背景が白いと、動画や白い文字が見づらくなります。

黒背景にすると、動画・白文字・アイコンが目立ちやすくなります。

黒背景
↓
動画が目立つ
白文字が読みやすい
アプリっぽく見える

もちろん、実際のTikTok画面は動画が背景全体に広がります。

しかし、動画を置く前の段階では、まず黒背景の土台を作っておくと分かりやすいです。

この節で作る最小アプリ

ここから実際にコードを書きます。

DartPadに次のコードを貼り付けてください。

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Text(
          'TikTok風アプリの土台',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

実行結果

実行すると、黒い画面の中央に白い文字が表示されます。

TikTok風アプリの土台

この時点では、とてもシンプルです。

しかし、このコードにはFlutterアプリの重要な基本構造がすべて入っています。

main
↓
runApp
↓
MaterialApp
↓
home
↓
Scaffold
↓
body
↓
Text

これが、これから作るTikTok風アプリの土台です。

コードを1行ずつ見る

import

import 'package:flutter/material.dart';

これは、Flutterの基本的なWidgetを使うための読み込みです。

MaterialApp、Scaffold、Text、Colors などを使うには、このimportが必要です。

material.dartを読み込む
↓
Flutterの基本Widgetが使える

main

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

main は、アプリのスタート地点です。

runApp によって、TikTokLikeVideoApp がアプリとして表示されます。

TikTokLikeVideoApp

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

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

TikTokLikeVideoApp は、アプリ全体の入口になるWidgetです。

ここでは、MaterialApp を返しています。

TikTokLikeVideoApp
└─ MaterialApp

このWidget自体は、状態が変化しないため、StatelessWidget を使っています。

StatelessWidgetとは何か

StatelessWidget は、状態を持たないWidgetです。

状態とは、ユーザー操作などで変わる値のことです。

たとえば、次のようなものが状態です。

いいねしているかどうか
今何番目の動画を見ているか
コメントが何件あるか
動画が再生中か停止中か

今作っている土台画面では、まだそういった変化はありません。

そのため、StatelessWidget で十分です。

buildメソッド

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

build メソッドは、Widgetの見た目を作る場所です。

この場合、TikTokLikeVideoApp の見た目は MaterialApp です。

初心者向けには、次のように覚えてください。

buildメソッドは、画面に何を表示するかを返す場所

ShortVideoHomePage

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Text(
          'TikTok風アプリの土台',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

ShortVideoHomePage は、最初に表示される画面です。

ここでは、Scaffold を返しています。

ShortVideoHomePage
└─ Scaffold
   └─ body
      └─ Center
         └─ Text

この構造が、1画面の基本になります。

Scaffoldの中身を見る

return const Scaffold(
  backgroundColor: Colors.black,
  body: Center(
    child: Text(
      'TikTok風アプリの土台',
      style: TextStyle(
        color: Colors.white,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

ここで、背景色を黒にしています。

backgroundColor: Colors.black,

そして、body に Center を置いています。

body: Center(
  child: Text(...),
),

Center は、中のWidgetを中央に置くWidgetです。

Text は、文字を表示するWidgetです。

TextStyleで文字を整える

style: TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
),

TextStyle は、文字の見た目を整えるための設定です。

設定	意味
`color`	文字色
`fontSize`	文字サイズ
`fontWeight`	文字の太さ

ここでは、白色で、少し大きく、太い文字にしています。

TikTok風アプリでは、動画の上に白い文字を重ねることが多いので、ここで白文字の扱いに慣れておきます。

constとは何か

今回のコードには、const が何度も出てきます。

runApp(const TikTokLikeVideoApp());

return const MaterialApp(

return const Scaffold(

const は、簡単に言うと「最初から変わらない固定のWidgetや値」に使います。

初心者向けには、まず次のように理解しておけば大丈夫です。

const = 変わらないものにつける印

今回のように、表示内容が固定されているWidgetには const をつけられます。

ただし、今後、いいねの状態や動画の再生状態など、変化する値を扱うときは、すべてに const をつけられるわけではありません。

最初は、エディタが const を提案したらつける、くらいの理解で大丈夫です。

TikTok風アプリの土台として見る

今回作ったコードを、TikTok風アプリの土台として見てみます。

TikTokLikeVideoApp
└─ MaterialApp
   └─ ShortVideoHomePage
      └─ Scaffold
         └─ body

この body の中に、今後いろいろな部品を入れていきます。

body
├─ 動画背景
├─ 上部ナビ
├─ 右側ボタン
├─ 下部テキスト
└─ コメント欄を開く仕組み

つまり、今はまだ文字だけですが、構造としてはすでにTikTok風アプリの入口ができています。

次の段階では何をするのか

今は、body に Center と Text だけを置いています。

body: Center(
  child: Text('TikTok風アプリの土台'),
),

次の段階では、この body を Stack に置き換えます。

body: Stack(
  children: [
    動画背景,
    上部ナビ,
    右側ボタン,
    下部情報,
  ],
),

TikTok風UIは、動画の上に文字やボタンが重なっているため、Stack が重要になります。

つまり、今回の節は、次の準備です。

MaterialAppでアプリ全体を作る
↓
Scaffoldで画面の土台を作る
↓
次にStackでTikTok風レイアウトを作る

手を動かす練習1：背景色を変える

次の部分を探してください。

backgroundColor: Colors.black,

これを次のように変えてみてください。

backgroundColor: Colors.deepPurple,

画面背景が紫色になります。

この練習で分かることは、Scaffold の backgroundColor が画面全体の背景色を決めているということです。

手を動かす練習2：表示文字を変える

次の部分を探してください。

'TikTok風アプリの土台'

これを次のように変えてみてください。

'ショート動画アプリを作る'

実行すると、中央の文字が変わります。

この練習で、Text の中の文字が画面に表示されることを確認できます。

手を動かす練習3：文字サイズを変える

次の部分を探してください。

fontSize: 24,

これを次のように変えてみてください。

fontSize: 32,

文字が大きくなります。

TextStyle の fontSize は、文字サイズを決める設定です。

手を動かす練習4：太字をやめる

次の部分を探してください。

fontWeight: FontWeight.bold,

これを削除してみてください。

文字の太さが通常になります。

文字の印象が変わることを確認してください。

よくあるつまずき1：MaterialAppとScaffoldの違いが分からない

初心者がよく混乱するのが、MaterialApp と Scaffold の違いです。

簡単にいうと、次の違いです。

Widget	役割
`MaterialApp`	アプリ全体の設定
`Scaffold`	1画面の土台

たとえるなら、MaterialApp はアプリ全体の建物です。

Scaffold は、その中の1つの部屋です。

MaterialApp
└─ Scaffold
   └─ body

まずは、この親子関係を覚えてください。

よくあるつまずき2：homeとbodyの違いが分からない

home は、アプリを起動したときに最初に表示する画面です。

home: ShortVideoHomePage(),

body は、Scaffoldの中身です。

body: Center(...),

整理すると、次のようになります。

書き方	意味
`home`	アプリの最初の画面
`body`	その画面の中身

構造で見ると、こうです。

MaterialApp
└─ home: ShortVideoHomePage
   └─ Scaffold
      └─ body

よくあるつまずき3：buildメソッドが何をしているか分からない

build は、そのWidgetが何を表示するかを返す場所です。

@override
Widget build(BuildContext context) {
  return const Text('Hello');
}

この場合、このWidgetは Text('Hello') を表示します。

難しく考えすぎず、最初は次のように覚えてください。

buildのreturnに書いたWidgetが画面に表示される

よくあるつまずき4：constをどこにつけるか分からない

const は、変わらないWidgetや値に使えます。

しかし、最初から完璧に理解しようとしなくても大丈夫です。

まずは、次の方針で進めましょう。

エディタがconstを提案したらつける
エラーになるなら外す
状態が変わるWidgetではconstを外すことがある

この章の後半では、いいねやコメントなど、状態が変わる画面を作ります。

そのときは、const を外す場面も出てきます。

この節の確認問題

確認問題1

main は何をする場所ですか。

答え

Dartプログラムのスタート地点です。

Flutterアプリでは、ここから runApp を呼び出してアプリを起動します。

確認問題2

runApp は何をする関数ですか。

答え

指定したWidgetをFlutterアプリとして起動する関数です。

確認問題3

MaterialApp は何のために使いますか。

答え

アプリ全体の基本設定をするために使います。

最初に表示する画面を home で指定できます。

確認問題4

Scaffold は何のために使いますか。

答え

1画面の土台を作るために使います。

背景色や画面の中身である body を設定できます。

確認問題5

home と body の違いは何ですか。

答え

home は、アプリを起動したときに最初に表示する画面です。

body は、Scaffoldの中に表示する画面の中身です。

確認問題6

TikTok風アプリで背景色を黒にする理由は何ですか。

答え

動画や白い文字、アイコンを目立たせるためです。

動画を主役にしたUIでは、黒背景が見やすくなります。

この節のまとめ

この節では、Flutterアプリの土台である MaterialApp と Scaffold を学びました。

Flutterアプリは、次のような流れで起動します。

main
↓
runApp
↓
MaterialApp
↓
home
↓
Scaffold
↓
body

MaterialApp は、アプリ全体の設定をするWidgetです。

Scaffold は、1画面の土台を作るWidgetです。

今回のTikTok風アプリでは、まず黒背景の全画面アプリを作りました。

まだ動画もボタンもありませんが、この土台があるからこそ、次の節から画面を重ねて作っていくことができます。

この節のポイント：
- mainはアプリのスタート地点
- runAppでFlutterアプリを起動する
- MaterialAppはアプリ全体の設定
- homeは最初に表示する画面
- Scaffoldは1画面の土台
- bodyは画面の中身
- TikTok風アプリでは黒背景の土台を作る

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

Flutterアプリは、MaterialAppで全体を作り、Scaffoldで1画面の土台を作るところから始まる。

次の節では、Stack を使って、動画の上に文字やボタンを重ねるTikTok風レイアウトを作っていきます。