[Flutter]DrawerをAppBarなしで使うには？

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

AppBarを使わないでDrawerを使う方法を紹介します。

方法

AppBarなしでDrawerを使うには、Drawerのボタンを自作します。

まず、ScaffoldKeyを用意し、Scaffoldウェジェットの引数「key」に指定します。

final _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      key: _scaffoldKey,
      drawer: Drawer(・・・),
      body: Body(),
    ),
  );
}

次に、StackやColumnなどを使い、左上もしくは右上のハンバーガーのIconButtonを配置します。

最後に、IconButtonのonPressedで、ScaffoldKeyのopenDrawerメソッドを呼び出します。

//IconButtonを左上もしくは右上に配置
IconButton(
  onPressed: () {
    _scaffoldKey.currentState?.openDrawer();
  },
  icon: Icon(Icons.menu),
),

Drawerのボタンを自作することで、AppBarなしでもDrawerを使うことが出来ます。

使用例

  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        drawer: Drawer(
          child: ListView.builder(
            itemBuilder: (context, index) => ListTile(
              title: Text('Item $index'),
            ),
            itemCount: 10,
          ),
        ),
        body: Stack(
          children: [
            Center(
              child: Text('Hello, Flutter'),
            ),
            Positioned(
              left: 10,
              top: 20,
              child: IconButton(
                onPressed: () {
                  _scaffoldKey.currentState?.openDrawer();
                },
                icon: Icon(Icons.menu),
              ),
            ),
          ],
        ),
      ),
    );
  }