FlutterでDrawerのアイコンをカスタマイズする

はじめに

Flutterで、例えばアイコンの下に文字を入れるなど、Drawerのアイコンをカスタマイズしたいときがあります。

こうしたときは、次のようにScaffoldStateを使うことで、カスタマイズできます。(ここでは、右側にボタンを配置するendDrawerで解説しています)

実装

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
  }

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        actions: <Widget>[
          // カスタムしたボタン
          InkWell(
            onTap: () => _scaffoldKey.currentState.openEndDrawer(),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(Icons.menu),
                const Text(
                  'メニュー',
                  style: TextStyle(
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      endDrawer: Drawer(),
    );
  }
}

ScaffoldにGlobalKeyを指定して、Scaffoldの状態を保持しているScaffoldStateを参照できるようにします。
Scaffoldのactionsにボタンを作成し、 タップ時に _scaffoldKey.currentState.openEndDrawer() でドロワーを開けるようにします。
こうすると、本来endDrawerにDrawerを指定すると生成されるボタンが生成されず、代わりにactionsで生成したボタンを通じてドロワーを開けるようになります。

参考

Flutter Custom Drawer Icon (use keys) · GitHub