Flutterの基本（後編）

前編と中編では、Flutterプロジェクトの基本構造、ウィジェットの概念、ステートフルウィジェットとステートレスウィジェットについて学びました。後編では、マテリアルデザイン、MaterialAppウィジェット、Scaffoldウィジェットについて説明し、最後にコラムを挿入します。

6. マテリアルデザインと`MaterialApp`

マテリアルデザイン（Material Design） は、Googleが提唱するデザインシステムです。プラットフォームやデバイスを問わず、一貫したユーザーエクスペリエンスを提供することを目的としています。マテリアルデザインは、現実世界の物理的な素材とその動きに着想を得ており、階層、奥行き、アニメーションなどを特徴としています。

Flutterは、マテリアルデザインをサポートする豊富なウィジェットを提供しています。MaterialAppウィジェットは、マテリアルデザインを適用したアプリを作成するための最も基本的なウィジェットです。

MaterialAppウィジェットは、以下のような機能を提供します。

アプリのテーマ設定
ナビゲーションの管理
ローカリゼーション対応

main.dartファイルで見たように、runApp関数にMaterialAppウィジェットを渡すことで、アプリ全体にマテリアルデザインを適用できます。

dart

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MaterialAppのthemeプロパティで、アプリのテーマを設定できます。colorSchemeでプライマリカラーやアクセントカラーなどを指定したり、useMaterial3をtrueに設定することで、最新のマテリアルデザイン（Material You）を有効にしたりできます。

7. スキャフォールドと`Scaffold`

Scaffoldウィジェットは、マテリアルデザインの基本的なレイアウト構造を提供するウィジェットです。Scaffoldを使うことで、以下のような一般的なアプリの要素を簡単に実装できます。

AppBar（アップバー）
ドロワー
ボトムナビゲーションバー
FloatingActionButton（フローティングアクションボタン）
スナックバー

Scaffoldウィジェットは、MaterialAppウィジェットのhomeプロパティに指定されることが多いです。

dart

class MyHomePage extends StatefulWidget {
  // ... 省略 ...

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // ... 省略 ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            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),
      ),
    );
  }
}

上記の例では、ScaffoldのappBarプロパティにAppBarウィジェット、bodyプロパティにCenterとColumnを組み合わせたウィジェット、floatingActionButtonプロパティにFloatingActionButtonウィジェットを指定しています。

Scaffoldを使うことで、マテリアルデザインの基本的なレイアウトを簡単に実装できます。

コラム：Flutterのレンダリングの仕組み

Flutterのレンダリングの仕組みについて簡単に説明します。

Flutterでは、ウィジェットツリーからレンダーツリーと呼ばれる別のツリーが作成されます。レンダーツリーは、画面に描画される要素を表すレンダーオブジェクトで構成されています。

ウィジェットのbuildメソッドが呼び出されると、対応するレンダーオブジェクトが作成または更新されます。レンダーオブジェクトは、サイズや位置などのレイアウト情報を持ち、実際に画面に描画される内容を決定します。

Flutterのレンダリングパイプラインは、以下の3つのフェーズで構成されています。

ビルドフェーズ: ウィジェットツリーが走査され、変更されたウィジェットのbuildメソッドが呼び出されます。
レイアウトフェーズ: レンダーオブジェクトのサイズと位置が計算されます。
ペイントフェーズ: レンダーオブジェクトが画面に描画されます。

この効率的なレンダリングパイプラインにより、Flutterは高速で滑らかなUI描画を実現しています。