Drawerの使い方

概要

Drawer

drawerキーワードを使用することでDrawerを定義することが出来る。
drawerは左側から表示させる。

child内にDrawerの内部を記述する。

以下にコード例を示す。

body: //body
drawer: const Drawer(
	child: Center(
		child: Text("Drawer"),
	),
),

EndDrawer

EndDrawerキーワードを使用することでDrawerを定義することが出来る。
EndDrawerは左側から表示させる。

child内にDrawerの内部を記述する。

以下にコード例を示す。

body: //body
endDrawer: const Drawer(
	child: Center(
		child: Text("EndDrawer"),
	),
),

コードからDrawerを開く。

コードからDrawerを開く場合には、以下のコードを使用する。

まず、keyをGlobalKeyで宣言する。
そして、Scaffoldでkeyを設定して、keyからdrawerの開閉制御を行う。

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
 
Scaffold(
  key: _scaffoldKey,
),
 
_scaffoldKey.currentState.openDrawer();    //開く
_scaffoldKey.currentState.closeDrawer();   //閉じる
_scaffoldKey.currentState.openEndDrawer();    //開く
_scaffoldKey.currentState.closeEndDrawer();   //閉じる