[Flutter]リストビュー(ListView)の下部分にボタンを固定表示するには？

Flutter

2021.10.24

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

リストビューの下部分にボタンを固定表示する方法を紹介します。

方法
まとめ

方法

プログラマー, プログラミング, コード, 仕事, コンピューター, インターネット, テクノロジー

リストビューの下部分にボタンを固定表示するには、「Stackウェジェット」と「Alignウェジェット」を使います。

まず、「Stackウェジェット」の引数「children」に、「ListView」と「Align」を指定します。

Stack(
  children: [
    ListView(),
    Align(),
  ],
),

次に、Alignウェジェットの引数「child」に、ボタンを指定します。

最後に、「Align」ウェジェットの引数「alignment」に、「Alignment.bottomCenter」を指定します。

Stack(
  children: [
    ListView(),
    Align(
         child: /* ボタン */,
         alignment : Alignmetn.bottomCenter,
    ),
  ],
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return Card(
                child: ListTile(
                  title: Text('$index'),
                ),
              );
            },
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.only(bottom: 40),
              child: ElevatedButton(
                child: Text('Button'),
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(250, 50),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }