目的
調べたことを少しずつメモに残す。(何回もやってれば使いこなせるっしょ。へーきへーき。)
一旦、理解した(つもり)範囲の内容
こういうことらしい。
1. Scaffold（スカフォールド）
- 役割：画面全体の土台（骨格）
- できること：
- 画面全体のレイアウト管理
- 上部バー（AppBar）の追加
- 下部ナビゲーション（BottomNavigationBar）の追加
- 左右スライドメニュー（Drawer）の追加
- FloatingActionButtonの配置
- SnackBarやBottomSheetの表示
- イメージ：建物の「骨組み」や「箱の外枠」
Scaffold
├ AppBar（上部バー）
├ Body（中身）
├ Drawer（スライドメニュー）
└ BottomNavigationBar（下部メニュー）
2. Material（マテリアル）
- 役割：マテリアルデザインの「紙」のような背景
- できること：
- 影（elevation）の設定
- 角丸や丸みの設定
- マテリアルデザインのタッチ効果（InkWellなど）を利用可能
- Containerではできない「マテリアル特有の視覚効果」を追加
- イメージ：机の上に置く「紙」や「カード」
Material
└─ Container（色・サイズ・余白）
3. Container（コンテナ）
- 役割：見た目の箱（装飾・レイアウト用）
- できること：
- 背景色、枠線、角丸の設定
- サイズ（幅・高さ）の設定
- 余白（padding）や外側スペース（margin）の調整
- 子ウィジェットの位置調整（alignment）
- イメージ：箱や入れ物（中にウィジェットを置く）
Container
├ width/height
├ padding/margin
├ decoration（色・枠線・角丸）
└ child（中身のウィジェット）
🔹まとめ（簡単に言うと）
| ウィジェット | 何に使う？ | ポイント |
|---|---|---|
| Scaffold | 画面全体の骨組み | AppBarやDrawerなど、画面全体の基本構造を作る |
| Material | 紙・カードの背景 | 影や丸み、マテリアルデザイン効果が使える |
| Container | 見た目の箱 | 色、サイズ、余白、枠線などを自由に調整できる |
追記
何が理解できていないのか少しわかったかも。
今まで作成したWidgetで、Scaffoldはあるが、MaterialとContainerがない場合があった。
どうやら、MaterialとContainerは必須ではないっぽい。
また、代用可能らしい。
実はひっそりとMaterialを使用していたっぽい。
さらに追記
実生活に例えてみた。
Scaffold→机みたいな物。机がないと物を置けないイメージ。
Flutterで言うと、Scaffoldがないと、Widgetが配置できず、UIに表示できない感じ。
Material→二輪車・三輪車・四輪車みたいな物。形や動きが決まっている物のイメージ。
Flutterで言うと、マテリアルデザインのルールに沿ったWidgetの感じ。
Container→大きい二輪車、黒い三輪車、余白のある4輪車みたいな物。既存の物の外観をカスタマイズするイメージ。
Flutterで言うと、Materialで決まっているWidgetの色・サイズ・余白・枠線などを自由に変えることができる。
終わり
一旦、こういう理解でよいだろう。
コメント