[Flutter]Drawerにヘッダー(header)を追加(add)するには？

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

Drawerにヘッダーを追加する方法を紹介します。

方法

Drawerにヘッダーを追加するには、 DrawerHeaderとListViewもしくはColumnを使います。

まず、DrawerのchildにListViewを指定します。

次に、ListViewの引数「children」の最初にDrawerHeaderを指定します。

そして、DrawerHeaderの引数「child」にヘッダーを指定します。

Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        child: /*ヘッダー*/,
      ),
    ],
  ),
),

最後に、DrawerHeaderの後ろに、Drawerとして表示するウェジェットを指定します。

drawer: Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        child: /*ヘッダー*/,
      ),
      DrawerItem1(),
      DrawerItem2(),
      ・・・・
    ],
  ),
),

これでDrawerにヘッダーを追加することが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                child: Container(
                  color: Colors.yellow,
                  child: Text('Healder'),
                  alignment: Alignment.center,
                ),
              ),
              ListTile(
                title: const Text('Item 1'),
              ),
              ListTile(
                title: const Text('Item 2'),
              ),
            ],
          ),
        ),
      ),
    );
  }