api.flutter.dev/material/Drawer-class 中の「参照」には、次の説明記載があります。
・Scaffold.drawer, where one specifies a Drawer so that it can be shown.
(1.Scaffold.drawer(Scaffold の Drawer プロパティ)について)
・Scaffold.of, to obtain the current ScaffoldState, which manages the display and animation of the drawer.
(2.Scaffold.of(Scaffold の of メソッド)について)
・ScaffoldState.openDrawer, which displays its Drawer, if any.
(3.ScaffoldState.openDrawer メソッド について)
・material.io/design/components/navigation-drawer.html
(4.Navigation Drawerのデザインパターンについて)
以下は、上記についての解説になります。
1.Scaffold.drawer(Scaffold の Drawerプロパティ)について
- Scaffold.drawerは、FlutterアプリケーションでDrawerを表示するために設定するプロパティです。
- Scaffoldは、Flutterの基本的なレイアウト構造を提供するウィジェットで、アプリのレイアウトに使用されます。ScaffoldのdrawerプロパティにDrawerウィジェットを設定することで、アプリ画面の左側からスライドして表示されるナビゲーションメニューを追加できます。
(例)このコードでは、ScaffoldのdrawerプロパティにDrawerウィジェットを設定することで、スライドメニューを追加しています。
Scaffold(
appBar: AppBar(title: Text('Drawer 使用例:')),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(color: Colors.blue),
child: Text('Drawer Header'),
),
ListTile(
title: Text('Item 1'),
onTap: () {
//tap押下時処理
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
//tap押下時処理
},
),
],
),
),
body: Center(child: Text('主コンテンツ')),
);
2.Scaffold.of(Scaffold の of メソッド)について
- Scaffold.ofは、現在のScaffoldStateを取得するためのメソッドです。
ScaffoldStateは、Scaffoldウィジェットの状態を管理し、その状態にアクセスするために使用されます。 - ScaffoldStateは、Drawerの表示やアニメーションなどの機能を管理します。Scaffold.of(context)を使用することで、現在のScaffoldの状態にアクセスし、Drawerを開くなどの操作が可能になります。
(例)このコードでは、ボタン押下時に、Scaffold.of(context).openDrawer()を呼び出してDrawerを開いています。
ElevatedButton(
onPressed: () {
Scaffold.of(context).openDrawer(); //Drawerを開く
},
child: Text('Drawerを開く'),
);
3.ScaffoldState.openDrawer メソッド について
- ScaffoldState.openDrawerは、Scaffoldに設定されたDrawerを表示するメソッドです。
Drawerが設定されている場合、このメソッドを呼び出すとDrawerが表示されます。 - このメソッドは、Scaffoldウィジェットに設定されたDrawerを手動で開くために使用します。
(例)このコードでは、ScaffoldStateのインスタンスを取得し、openDrawer()メソッドを呼び出すことでDrawerを表示しています。
ScaffoldState scaffoldState = Scaffold.of(context);
scaffoldState.openDrawer(); //Drawerを開く
4.Navigation Drawerのデザインパターンについて
- material.io/design/components/navigation-drawer.htmlは、GoogleのMaterial Designガイドラインの一部で、Navigation Drawer(ナビゲーションドロワー)のデザインパターンについて説明している公式ドキュメントのURLです。
- ここでは、ナビゲーションドロワーの使い方やデザインのベストプラクティスが紹介されています。FlutterのDrawerはこのガイドラインに基づいて設計されており、デザインガイドラインを理解するためにこのリソースが参考になります。
5.まとめ
- Scaffold.drawerは、Drawerウィジェットを設定して表示するためのプロパティ。
- Scaffold.of(context)は、現在のScaffoldの状態を取得し、Drawerの表示や他の操作を行うために使用。
- ScaffoldState.openDrawerは、プログラム上でDrawerを開くためのメソッド。
- material.io/design/components/navigation-drawer.htmlは、ナビゲーションドロワーに関するMaterial Designガイドラインの公式ドキュメント。