如何在 Flutter 中创建一个可滚动的列，如果它不占用所有空间，它会在某处扩展？

Question

I'm trying to create a scrollable column that has a widget at the bottom of the screen if it does not fill it up. However, if it does it scrolls.

First I tried with a simple Column with MainAxisSize.max and Expand with an empty Container which worked well until the column overflowed.

[...]

Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    MyWidget(),
    MyWidget(),
    [...],
    MyWidget(),
    Expand(child: Container()),
    ElevatedButton()
  ],
)

Then I searched and found the recommended solution for making a Column scrollable is the SingleChildScrollView . This made all of my widgets in the column disappear (which I am still unsure why) until I removed the Expand which although solved one problem, introduced another.

[...]

SingleChildScrollView(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      MyWidget(),
      MyWidget(),
      [...],
      MyWidget(),
      // Expand(child: Container()),
      ElevatedButton()
    ],
  )
)

So my question is, how can I make a Column both scrollable and if it does not need all the space to expand so that the last child is at the bottom of the screen?

Answer 1

IntrinsicHeight is too expensive to use but in this situation you have no choice. Try this:

LayoutBuilder(builder: (context, constraint) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraint.maxHeight),
        child: IntrinsicHeight(
          child: Column(
            children: [
              Container(
                color: Colors.red,
                height: 400,
                width: double.infinity,
              ),
              Expanded(
                child: Container(
                  color: Colors.blue,
                  width: double.infinity,
                ),
              ),
            ],
          ),
        ),
      ),          
    );
  })

in this example if you set height for blue container you will see the scrollview works, and if you use Expanded on it, it takes the available size.