【Flutter】マテリアルデザインとMaterialAppとは？

マテリアルデザイン（Material Design）とは？

マテリアルデザイン(Material Design)とはGoogleが提供しているデザインシステムのことです。マテリアルデザインによってアプリ開発を快適に、素早く、そして美しくすることを可能にしました。

material library

Flutterアプリ開発のコアとなるmaterial libraryのWidgetは全てマテリアルデザインによるものです。

>> 【Flutter】Widget・Widgetツリーの基本的な仕組み ｜ FlutterアプリのUI構造

様々なデザインツール

また、Flutterではmaterial libraryのWidget以外にもマテリアルデザインが提供しているカラー、サウンド、アイコンなど様々な機能を使用できます。

material libraryの使用方法

material libraryのWidgetを使用するには次の手順が必要になります。

1. material libraryのパッケージのインポート
2. runApp/MaterialAppの生成

パッケージをインポート

import 'package:flutter/material.dart';

material libraryのパッケージをFlutterのプロジェクトにimportします。(Flutterのプロジェクト生成時に既にデフォルトでインポート済み)

runApp/MaterialAppの生成

MaterialAppとは、material libraryのWidgetを使用可能にするクラスです。つまり、material libraryのWidgetを使うには、MaterialAppを先にインスタンス化しておく必要があります。

MaterialApp(
  home: MyWidget(),
)

このコードのようにMaterialAppのhomeプロパティの引数にWidgetツリーのrootとなるWidgetを指定します。

【Flutter】Widget・Widgetツリーの基本的な仕組み ｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

flutternyumon.com

2021.04.14

仮に、MaterialAppをインスタンス化しないで他のmaterial libraryのWidgetを使うとコンパイルエラーが起きます。

MaterialAppのプロパティ

MaterialAppのプロパティには、homeプロパティ以外にも便利なプロパティがたくさんあります。例えば、themeプロパティを使えば簡単にアプリのテーマカラーを変えることができます。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData.dark(), //ダークテーマ
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    ),
  );
}