🤔

【Flutter】なぜウィジェットの import 先に「material.dart」を選ぶのか

Daigo Wakabayashi

2022/10/20に公開

Flutter

Dart

tech

はじめに

はじめまして、ダイゴです。
Flutter で開発をしていると頻繁に、 ↓ のような import 選択をすることがあるかと思います。

今までは 「とりあえず material.dart を選択しといたら良い」 と聞いたことがあったので、脳死で material を選択していたのですが、先日 「なんで material.dart を選択するんだろう」「widgets.dart じゃだめなのか」 と疑問に思い、それをきっかけに Dart のディレクティブについて少し理解が深まったので、記事にしました。

どなたかの参考になれば幸いです。

なぜ material.dart を選ぶのか

結論、

「（Material デザインに則った）Flutter アプリ開発に必要なファイルをすべて包含しているファイルだから」

です。

図で示すと、

material.dart
cupertino.dart
widgets.dart

の 3 つのファイルは以下のような関係になっていて、

material.dart を import すると青色部分のライブラリ（ファイル）が使えるようになります

ファイルを見ながら具体的に解説していきます。（文中、間違っている点等あればご指摘いただけると幸いです 🙏）

material.dart の中身

今まで脳死で選択していた material.dart の中身を見てみると、以下のようになっています。

ファイルに書かれている内容をざっくりまとめると

material という library として公開している
いろんなファイルを export している

という 2 点になります。

import はよく使うので「他のファイルを使えるようにするもの」となんとなく分かりますが、library と export が分かりません。

`library` と `export`

以下の記事がとても参考になりました。

本記事向けにまとめるなら

`library`

ライブラリ（importを用いて読み込むことのできるファイル）に名前をつけるために使う
library と明示しなくても、Dart ファイルであれば自動的に 1 つのライブラリとして扱われる

`export`

外部に公開するライブラリ（ファイル）を指定するために使う
メインのライブラリ（ファイル）に export を記述することで、そのライブラリを読み込むだけで export で指定されたライブラリ（ファイル）にもアクセスできる

といった感じでしょうか。
つまり、上述の material.dart ファイル内では

library：material.dart ファイルを「material」というライブラリとして外部に公開する
export ：Material デザインに則ったコンポーネントファイルたち（AppBar、ElevatedButton 等）を「material」を読み込むだけでアクセスできるようにしている

といったことが行われています。