[Flutter]DrawerHeaderを横幅いっぱい(full width)にするには？

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

Drawerを横幅いっぱいにする方法を紹介します。

方法

Drawerを横幅いっぱいにするには、SizedBoxを使います。

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

そして、SizedBoxの引数「width」に「double.infinity」を指定します。

SizedBox(
  width: double.infinity,
  child: Drawer(),
),

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: SizedBox(
        width: double.infinity,
        child: Drawer(
          child: Column(
            children: [
              DrawerHeader(
                child: Container(
                  color: Colors.green,
                ),
              ),
              ListTile(
                title: Text('Item1'),
              ),
              ListTile(
                title: Text('Item2'),
              ),
              ListTile(
                title: Text('Item3'),
              ),
            ],
          ),
        ),
      ),
    );
  }