これから「Flutter」を勉強していこうと思っている人向けには「メモ」程度で参照してみてください。
■ メニューボタンの呼び方
以下の種類がある。
- ハンバーガーメニュー
- ケバブメニュー
- ドネルメニュー
- ミートボールメニュー
- ベントーメニュー
■ Drawer（ドロワー）メニューとは？
「ドロワー」は「引き出し」という意味で、メニューの表示方法が横から引き出しのように出てくるように見える事から成り立っている。
「ドロワー」の中に含まれている内容が「サイドメニュー」となる。
■ サイドメニューの構成
一番上は「DrawerHeader（ドロワーヘッダー）」を定義する。
各メニューは「ListTile（リストタイル）」のWidgetを利用する。
見た目のレイアウトは「column」or「ListView」のWidgetの子供（children:）に追加する形で問題ない。
■ メニューのアクションを登録
「ListTile」の項目に「onTap：」の項目を追加して、実行する関数等（go_router）を利用して画面遷移させる。
【サンプルコード】
return ListView(
children: [
DrawerHeader(
child: Text('ドロワーヘッダー')
),
ListTile(
title: Text('メニュー１'),
+ onTap: () {
+ debugPrint('「メニュー１」がタップされました。');
+ }
),
ListTile(
title: Text('メニュー２'),
+ onTap: () {
+ debugPrint('「メニュー２」がタップされました。');
+ }
),
],
);
また「ListTile」には文字の横にアイコン等も描画が可能。
■ 「Drawer」メニューの追加方法
作成したサイドメニューのWidgetをimportとしておき、メインコードの方で「Drawer」に関する定義を追加する事で実現が可能。なお、実際にメニュー画面に表示させるよう為には、「Scaffold」の「drawer:」という項目への定義も忘れてはいけない。
【サンプルコード】
const drawer = Drawer(
child: SideMenu(),
);
final scaffold = Scaffold(
drawer: drawer,
);
上記定義で、画面にドロワー（引き出し）が連結されることになります。
また、「ハンバーガーメニュー」のアイコンについては、Flutterが自動的に表示してくれるようです。
■ 「Scaffold（スキャフォールド）」の6つの便利機能について
画面レイアウトを作成する際に定義している「Scaffold」には「6つ」の便利機能が存在している。
- appBar（アップバー）：画面上部（ヘッダー）
- drawer（ドロワー）：左サイドメニュー
- endDrawer（エンドドロワー）：右サイトメニュー
- body（ボディ）：本体
- floatingActionButton（フローティングアクションボタン：FAB）：画面右下にアクションボタンを表示
- bottomNavigationBar（ボトムナビゲーションバー）：画面下部（フッターナビゲーションメニュー）
最後に
Flutter（Dart言語）に関する最低限の情報を「学習メモ」としてまとめてみました。
内容に誤りがありそうであれば、遠慮なくご指摘いただけますと幸いです。
【学習の参考にした動画】
素敵な解説動画の作成ありがとうございます。
本記事の内容より。動画を見た方が解りやすいと思います。