はじめに
はじめまして、ダイゴです。
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」を読み込むだけでアクセスできるようにしている
といったことが行われています。
widgets.dart じゃだめなのか
widgets.dart と聞くと全部の widget を import できそうですが、試しに widgets.dart を import してみると以下のようになります。
Material 関連の widget（MaterialApp, ThemeData 等）が参照できていません。
これは、widgets.dart 内では Material 系のコンポーネントが export されていないためです。図でいうと以下のような状態です。
widgets.dart では Material でも Cupertino でもない共通の widget（Text や GestureDetector 等）が export されています。
そして material.dart と cupertino.dart をよく見てみると、両方とも widgets.dart を export しています。
つまり、どちらか一方でも import すれば widgets.dart 内のクラスも参照できているというわけですね。（まさに冒頭の図のイメージ）
まとめ
export, import は頭の中で「どっちが何だ？」みたいな感じになりがちでしたが、図にするとすんなり理解できました。
どちらも Flutter の内部ファイルを見に行った時とかによく見かけると思うので、よくわからなくなった時はこの図を参考にしていただけると幸いです。
最後までご覧いただき、ありがとうございました。
参考記事
Discussion