[Flutter]AppBarのアイコンからDrawerを開くには？

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

AppBarのアイコンをタップしたときに、Drawerを開くには、どうしたら良いのでしょうか？

方法

Drawerを開く方法は、２つあります。

ScaffoldKey

１つは、ScafoldKeyを使う方法です。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey, //Keyの設定
        drawer: Drawer(),
        appBar: AppBar(
          leading: IconButton(
              onPressed: () {
                _scaffoldKey.currentState!.openDrawer(); //Drawerを開く
              },
              icon: Icon(Icons.settings)),
          title: Text('sample'),
        ),
        body: Center());
  }

ScaffoldKeyのopenDrawerメソッドを使うことによって、Drawerを開くことが出来ます。

Builder

もう１つは、Builderを使う方法です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
            leading: Builder(
                builder: (context) => IconButton(
                      icon: Icon(Icons.settings),
                      onPressed: () => Scaffold.of(context).openDrawer(),
                    )
　　　　　　　　　　　　),
            title: Text('sample')),
        body: Center());
  }

Builderクラスを使うことによって、Scaffoldに対して、openDrawerを呼び出せるようになります。

まとめ

AppBarのアイコンからDrawerを開くには、２つの方法があります。

• ScaffoldKeyを使う方法
• Builderを使う方法

どちらでも同じようにDrawerを開くことが出来ますので、好みで選んでください。