【Flutter/Dart】スクロール部 + 最下部に張り付け

やりたいこと

登場人物

• 何らかのアイテムの一覧（以降ListViewとして話を進める）

• 何らかのWidget（以降テキストとして話を進める）

配置

• テキストは、アイテムの個数に関わらず画面最下部に固定

• アイテム一覧は、テキストを配置して残った領域を使用 数が少ない場合は、下の方は余白 数が多い場合は、スクロール

解決策

以下のようにする。

Container(
  padding: const EdgeInsets.all(16),
  height: double.infinity,
  child: Column(
    children: [
      Expanded(
        child: _itemList(),
      ),
      _bottom()
    ],
  )
)

//アイテム一覧
Widget _itemList () => ListView.builder(
  shrinkWrap: true,
  itemBuilder: (context, index) => Text(
    index.toString(),
    style: const TextStyle(
      fontSize: 16
    ),
  ),
  itemCount: 100,
);

//最下部に張り付けるWidget
Widget _bottom() => const Text(
  "Bottom",
  style: TextStyle(
    fontSize: 18
  ),
);

レイアウトとサイズは以下のように決まる

1. Container(height = doubke.infinity)の高さは画面高さに設定される

2. Textが画面最下部に配置される

3. 画面からTextのサイズを除いた領域がExpandedに割り当てられる

4. Expandedの高さがListViewの高さに割り当てられる

5. Expandedの高さよりリストが長い場合は、スクロールされる
   

最後に

ColumnのmainAxisAlignmentでやろうとすると上手くいかないです。

こういう場合、「どういう順番でレイアウトとサイズを決めるか」を実際に頭の中で想像していくと解が出たりします。