[Flutter]リストビュー(ListView)でフッター(footer)を固定(fixed)表示するには？

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

リストビューでフッターを固定表示する方法を紹介します。

方法

リストビューでフッターを固定表示するには、Columnウェジェットを使います。

まず、Columnの「children」に「Expanded」を指定し、Expandedの引数「child」にリストビューを指定します。

Column(
  children: [
    Expanded(
      child: ListView(
        children : [],
      ),
    ),
  ],
),

そして、「Expanded」の後に、フッターを指定します。

Column(
  children: [
    Expanded(
      child: ListView(
        children : [],
      ),
    ),
    Footer(),
  ],
),

これでフッターを固定表示できます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: ListView(
                 children : [
                    for (var i = 0; i < 20; i++)
                       Card(
                            child: ListTile(
                            title: Text('$index'),
                        ),
                  ]
              ),
            ),
            Container(
              height: 75,
              width: double.infinity,
              color: Colors.pink,
              child: Text('Footer'),
            ),
          ],
        ),
      ),
    );
  }