【Flutter】material library・MaterialAppとは？ Google推奨のマテリアルデザインが実装できる

このような疑問にお答えします。

本記事では、マテリアルデザイン、material library、MaterialAppの違いと特徴について紹介します。

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

マテリアルデザイン(Material Design)とはGoogleが推奨しているデザインで、マテリアルデザインのデザインや機能をFlutterではWidgetとして実装できます。

美しくて高性能なWidgetが実装可能

マテリアルデザインによるカラー、サウンド、アイコンなど様々なデザイン・機能が使用できます。

material libraryとは？

material libraryとは、様々な Material Widget（マテリアルデザインのデザイン・機能が使えるWidget）がつまったパッケージのことです。よって、FlutterではMaterial Widgetを使用するためにmaterial libraryをインポートする必要があります。

material libraryのパッケージをインポート

import 'package:flutter/material.dart';

material libraryのパッケージをインポートするには、上記のコードをFlutterプロジェクトのscpriptの頭に書く必要があります。

MaterialAppとは？

MaterialApp(
  home: MyWidget(),
)

material libraryのパッケージをインポートしただけではMaterial Widgetを使用できません。使用するには先にMaterialApp Widgetを上記のコードのように実装しておく必要があります。

MaterialApp Widgetを使用せずに、material libraryのWidgetを使った場合

MaterialAppを先に実装しないで他のmaterial libraryのWidgetを使うとエラーが起きます。

MaterialApp Widgetは他にも色々な機能がある

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,
            ),
          ),
        ),
      ),
    ),
  );
}