「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が実装可能
マテリアルデザインによるカラー、サウンド、アイコンなど様々なデザイン・機能が使用できます。
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とは？
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,
),
),
),
),
),
);
}Flutterを学ぶなら「Udemy」または「侍エンジニア塾」
- 独学でFlutterを学ぶなら「Udemy」
- プログラミングスクールで学ぶなら「侍エンジニア塾」
Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。
独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。
