[Flutter/Dart] Scroll part + fixed at the bottom

What want to do

Characters

• A list of some items (hereafter ListView)

• Some Widget (hereafter text)

Layout

• Text is fixed at the bottom of the screen regardless of the number of items

• The item list uses the space left over after placing the text. If the number is small, the lower part is a margin If there are many, scroll

Solution

Do the following.

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

//itemList
Widget _itemList () => ListView.builder(
  shrinkWrap: true,
  itemBuilder: (context, index) => Text(
    index.toString(),
    style: const TextStyle(
      fontSize: 16
    ),
  ),
  itemCount: 100,
);

//Widget fixed at the botton
Widget _bottom() => const Text(
  "Bottom",
  style: TextStyle(
    fontSize: 18
  ),
);

The layout and size are determined as follows

1. Container(height = doubke.infinity) height is set to screen height

2. Text is placed at the bottom of the screen

3. The screen area minus the size of Text is allocated to Expanded

4. Expanded height assigned to ListView height

5. If the list is longer than the Expanded height, it will be scrolled.

Lastly

When I try to do it with mainAxisAlignment of Column, it doesn't work.

In such a case, you can find a solution by actually imagining "in what order the layout and size are decided" in your head.