【Flutter】MaterialAppとは?materialライブラリのWidget使用に必須

今回はFlutterでアプリ開発をする際にほぼ必須となるMaterialAppについて紹介します。

Flutter初心者にとってMaterialAppの必要性が分からない方も少なくないと思うので順を追って分かりやすく解説していきます。

\ 世界最大級のオンライン学習サービス /

目次

Widgetを使用するにはパッケージが必要

FlutterアプリはWidgetをツリー状に組み合わせて作られますが、Widgetを使用するためにパッケージをインポートし、パッケージに含まれるライブラリからWidgetを使用します。

よってScaffoldTextはdartファイルで初めから使用できるのではなくパッケージをインポートして使用しています。

materialライブラリで主なWidgetを使用できる

import 'package:flutter/material.dart';

Android StudioやVS CodeなどでFlutterプロジェクトを作成するとデフォルトで上記コードがmain.dartに書かれていますが、これは「Flutterパッケージ」のインポート文です。

このパッケージを導入することで「materialライブラリ」のWidgetを使用できます。materialライブラリでは先ほど紹介したScaffoldTextなどが使用できます。

MaterialAppの役割は?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterZero')),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Flutterでは「Material Components(マテリアルコンポーネント)」のWidgetを使用する際はMaterialAppを先祖に持つ(ラップされる)必要があります。

例えばmaterialライブラリのWidgetであるScaffoldの先祖にMaterialAppがない場合はエラーが発生してしまいます。とりあえずmaterialライブラリのWidgetは全てMaterialAppでラップしおけばOKです。

MaterialAppなし

MaterialAppあり

MaterialAppでテーマやページを指定できる

MaterialAppにはmaterialライブラリのWidgetをラップする以外にも便利なプロパティがあります。

下のサンプルコードではroutesでアプリで使用するページを登録して、initialRouteで初期ページを指定しています。Navigatorを使えば画面遷移をアプリで実装できます。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const Screen1(),
        '/second': (context) => const Screen2(),
        '/third': (context) => const Screen3(),
      },
    ),
  );
}

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen1'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Screen2'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Screen3'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Screen1'),
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Screen3'),
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Screen3 extends StatelessWidget {
  const Screen3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen3'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Screen1'),
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
            ),
            SizedBox(height: 10),
            ElevatedButton(
              child: Text('Screen2'),
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
            ),
          ],
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次