[Flutter]右のDrawerを開くには？

どうも、ちょげ(@chogetarou)です。

右側に配置されているendDrawerをコードで開く方法を紹介します。

方法

右側のDrawerを開くには、ScaffoldKeyを使います。

まず、ScaffoldKeyを用意し、Scaffoldウェジェットの引数「key」に指定します。

final _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      key: _scaffoldKey,
      enddrawer: Drawer(・・・),
      body: Body(),
    ),
  );
}

そして、ScaffolKeyからopenEndDrawerメソッドを呼び出します。

//右側のDrawerを開く
_scaffoldKey.currentState?.openEndDrawer();

ScaffoldKeyのEndDrawerメソッドを呼び出すことで、右側のDrawerをコードで開くことが出来ます。

使用例

  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        drawer: Drawer(
          child: ListView.builder(
            itemBuilder: (context, index) => ListTile(
              title: Text('Item $index'),
            ),
            itemCount: 10,
          ),
        ),
        body: Stack(
          children: [
            Center(
              child: Text('Hello, Flutter'),
            ),
            Positioned(
              left: 10,
              top: 20,
              child: IconButton(
                onPressed: () {
                  _scaffoldKey.currentState?.openDrawer();
                },
                icon: Icon(Icons.menu),
              ),
            ),
          ],
        ),
      ),
    );
  }