【Flutter初心者向け】MaterialAppとScaffoldとは？？サンプルアプリをもとに分かりやすく解説

こんにちは！文系プログラマーいおです！

Flutterアプリをいざ作ろう！！
と思ったときにまずぶつかる疑問、

「MaterialApp」「Scaffold」て何者？？

ということで今回は「MaterialApp」「Scaffold」の役割と使い方について、Flutterプロジェクトを立ち上げたときに自動で作成されるサンプルアプリを用いてまとめていきます。

はじめに
サンプルアプリのウィジェット構成
MaterialAppウィジェットについて
- MaterialAppとは
- サンプルアプリでの具体例（MaterialApp）
Scaffoldウィジェットについて
- Scaffoldとは
- サンプルアプリでの具体例（Scaffold）
おわりに
参考

はじめに

まずはじめに、Flutterプロジェクトを立ち上げたときに作成されるサンプルアプリの構成や内容がわからない方は下記記事を参考にしてみてください。

サンプルアプリのウィジェット構成

MaterialAppとScaffoldの説明に入っていく前に、サンプルアプリのウィジェット構成を理解しておきましょう。中身が入ってきやすくなると思います！

サンプルアプリのウィジェット構成を図に表すと以下図1のようになります。

図1

Flutterでアプリ開発をしていくときは図1のようなウィジェット構成（ウィジェットツリーと呼びます）を意識してレイアウトを考えることが大事です。

MaterialAppウィジェットについて

MaterialAppとは

MaterialAppはFlutterフレームワークで作成されたアプリケーションのルートとなるウィジェットで、アプリのテーマやナビゲーション、ローカライズなどのアプリ全体の管理を行う役割のウィジェットです。このMaterialAppウィジェットのおかげでマテリアルデザインでのアプリ開発が容易となっています。

※マテリアルデザイン・・・Googleが提唱したデザインシステムの一種で、直感的な操作を可能にし、異なるデバイスやプラットフォーム間での一貫したユーザー体験（UX）を実現することを目指しているものです。

サンプルアプリでの具体例（MaterialApp）

下記がサンプルアプリ内でMaterialAppを定義している部分です。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyAppクラスのbuild()メソッド内にMaterialAppを定義しています。プロパティとして「title：アプリ全体のタイトル」（これはアプリ画面の上に表示されているタイトルではありません）・「ThemeData：アプリ全体のテーマ」を設定しています。

Scaffoldウィジェットについて

Scaffoldとは

Scaffoldは、マテリアルデザイン用のウィジェットです。アプリの画面上部に表示するバーである「appBar」、画面下部に表示するナビゲーションバーである「bottomNavigationBar」などを含んでいて、簡単にマテリアルデザインの対応が可能となっています。

サンプルアプリでの具体例（Scaffold）

下記がサンプルアプリ内でScaffoldを定義している部分です。

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

_MyHomePageStateクラスのbuild()メソッド内にScaffoldを定義しています。プロパティとして「appBar：画面上部に表示されるタイトル」「body：メイン画面のコンテンツ」「floatingActionButton：メイン画面の上に浮かび上がる円形のアイコンボタン」を設定しています。