Flutter Drawerをタップで閉じるサンプル

2024年1月12日

環境
Windows11 pro 64bit
Flutter 3.3.7

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

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

ウェジェットの引数などでタップイベントを追加します。
タップイベントの処理で、Navigator.pop(context)を呼び出します。

使用例

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