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

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

「material library・MaterialApp・マテリアルデザインの違いって何?」

「Material Appって何のために必要なの?」

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

結論

Flutterではmaterial libraryのパッケージがデフォルトでインポートされており、Google推奨のマテリアルデザインをFlutterに実装できます。また、material libraryのWidgetを使用するにはMaterialApp Widgetを先に実装する必要があります。

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

目次

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

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

ティファ

WidgetとはFlutterアプリのUIを構築しているパーツのことだよ。以後、マテリアルデザインのデザイン・機能を使用できるWidgetのことを「Material Widget」と呼んでいくよ!

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

マテリアルデザイン1
マテリアルデザイン2
マテリアルデザイン3

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

material libraryとは?

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

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

import 'package:flutter/material.dart';

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

ティファ

Flutterプロジェクトを作成した時にデフォルトでmaterial libraryがインポートされているよ!

MaterialAppとは?

MaterialApp1
MaterialApp(
  home: MyWidget(),
)

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

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

MaterialApp2

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

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

MaterialApp3

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

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる