[Flutter]Drawerのアイコン(icon)を変える(change)には？

[Flutter]Drawerのアイコンを変えるには？

Flutter

2021.11.07

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

Drawerのアイコンを変える方法を紹介します。

方法

Drawerのアイコンを変えるには、AppBarの引数「leading」とIconButtonを使います。

まず、Keyを用意します。

var _scaffoldKey = GlobalKey<ScaffoldState>();

そして、Scaffoldの引数「key」に用意したKeyを指定します。

次に、AppBarの引数「leading」にIconButtonを指定します。

このIconButtonの引数「icon」で、Drawerのアイコンを設定します。

Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    leading: IconButton(
      onPressed: () {},
      icon: Icon(Icons.person_search),
    ),
  ),
  drawer: Drawer(),
);

最後に、IconButtonのonPressedにDrawerを開く処理を追加します。

return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    leading: IconButton(
      onPressed: () => _scaffoldKey.currentState!.openDrawer(),
      icon: Icon(Icons.person_search),
    ),
  ),
  drawer: Drawer(),
);

これでDrawerのアイコンを変えることが出来ます。

以下は、使用例です。

使用例

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          leading: IconButton(
            onPressed: () => _scaffoldKey.currentState!.openDrawer(),
            icon: Icon(Icons.person_search),
          ),
        ),
        drawer: Drawer(
          child: Column(
            children: [
              ListTile(
                leading: Icon(Icons.person),
                title: Text('Person 1'),
              ),
              ListTile(
                leading: Icon(Icons.person),
                title: Text('Person 2'),
              ),
              ListTile(
                leading: Icon(Icons.person),
                title: Text('Person 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }