[Flutter]Drawerの下部(bottom)にウェジェット(widget)を表示する(show)には？

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

Drawerの下部にウェジェットを表示する方法を紹介します。

方法

Drawerの下部にウェジェットを表示するには、ColumnウェジェットとExpandedウェジェットを使います。

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

次に、ColumnのchildrenにExpandedでラップした上部に表示するウェジェットを指定します。

Drawer(
  child: Column(
    children: [
      Expanded(
        child: /*上側に表示するウェジェット*/,
      ),
    ],
  ),
),

そして、Expandedの後に下部分に表示するウェジェットを指定します。

Drawer(
  child: Column(
    children: [
      Expanded(
        child: /*上側に表示するウェジェット*/,
      ),
      DrawerBottomWidget(),//下側に表示するウェジェット
    ],
  ),
),

これでDrawerの下部にウェジェットを表示することが出来ます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        drawer: Drawer(
          child: Column(
            children: [
              Expanded(
                child: ListView(
                  children: [
                    DrawerHeader(
                      child: Container(
                        color: Colors.yellow,
                      ),
                    ),
                    ListTile(
                      leading: Icon(Icons.person),
                      title: Text('Person1'),
                    ),
                    ListTile(
                      leading: Icon(Icons.person),
                      title: Text('Person2'),
                    ),
                    ListTile(
                      leading: Icon(Icons.person),
                      title: Text('Person3'),
                    ),
                  ],
                ),
              ),
              TextButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('Close'),
              ),
            ],
          ),
        ),
      ),
    );
  }