SingleChildScrollView inside a nest of Columns

Question

I am having trouble implementing SingleChildScrollView. In my understanding, I can use SingleChildScrollView to make the widgets inside it scrollable. I have created following basic example in which I want ElevatedButton to be at the bottom. The remaining space is to be occupied by other widgets. And as per my understanding, if the content in other widgets exceeds the available space, the content should become scrollable because of SingleChildScrollView.

return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Column(
      children: [
        Text("Some Text Here"),
        Column(
          children: [
            Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: Column(
                  children: [
                    Container(color: Colors.red, height: 500),
                    Text("HELLO"),
                    Container(color: Colors.red, height: 500),
                  ],
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text("BUTTON"),
            ),
          ],
        )
      ],
    ),
  ),
);

I have used Expanded above SingleChildScrollView so that the remaining space after ElevatedButton has been placed should be the scrollable area so that it has a height constraint.

How can I fix this?

Error: ════════ Exception caught by rendering library ═════════════════════════════════ The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Answer 1

Second Column is getting incoming height constraints are unbounded., You can wrap it with Expanded widget to get available space.

return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Column(
      children: [
        Text("Some Text Here"),
        Expanded(
          child: Column( //this one 
            children: [
              Expanded(
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: Column(
                    children: [
                      Container(color: Colors.red, height: 500),
                      Text("HELLO"),
                      Container(color: Colors.red, height: 500),
                    ],
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("BUTTON"),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);

Answer 2

You only need 2 Columns. First column is for the layout in the SinglechildScrollView and the second column is to layout the SinglechildScrollView with the text at the top and the button at the bottom.

return Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            child: Column(
              children: [
                Text("Some Text Here"),
                Expanded(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: Column(
                      children: [
                        Container(color: Colors.red, height: 500),
                        Text("HELLO"),
                        Container(color: Colors.red, height: 500),
                      ],
                    ),
                  ),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text("BUTTON"),
                ),
              ],
            ),
          ),
        );