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

マテリアルデザイン & MaterialApp
スポンサーリンク

マテリアルデザイン(Material Design)とは?

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

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

MaterialApp(
  home: MyWidget(),
)

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

without MaterialApp

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

MaterialAppのプロパティ

MaterialApp-Dark-Theme

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,
            ),
          ),
        ),
      ),
    ),
  );
}
タイトルとURLをコピーしました