[Flutter]Drawerをタップ(tap)で閉じる(close)には？

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

Drawerをタップで閉じる方法を紹介します。

方法

Drawerをタップで閉じるには、Navigator.pop(context)を使います。

まず、ボタンやGestureDetector、もしくはウェジェットの引数などでタップイベントを追加します。

そして、タップイベントの処理で、Navigator.pop(context)を呼び出します。

Drawer(
  child: ListView(
    children: [
      ・・・
      TextButton(
        onPressed: () {
          Navigator.pop(context); //Drawerを閉じる
        },
        child: Text('Close'),
      )
    ],
  ),
),

これでタップでDrawerを閉じることが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                child: Container(
                  color: Colors.yellow,
                  child: Text('Healder'),
                  alignment: Alignment.center,
                ),
              ),
              ListTile(
                title: const Text('Item 1'),
              ),
              ListTile(
                title: const Text('Item 2'),
              ),
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('Close'),
              )
            ],
          ),
        ),
      ),
    );
  }