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.

score 1 · Answer 1 · answered May 07 '23 at 13:58

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"),
                ),
              ],
            ),
          ),
        );

score 1 · Accepted Answer · answered May 07 '23 at 14:13

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"),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);

can you kindly explain why does the second column have unbounded height? And is there a widget inspect with which we can see what is happening to diagnose the issue? — Saad Bashir, May 07 '23 at 17:02
Top Column providing inner column infinite height(constraints) ,you can check [UI/layout/constraints](https://docs.flutter.dev/development/ui/layout/constraints) — Md. Yeasin Sheikh, May 07 '23 at 18:42

SingleChildScrollView inside a nest of Columns

2 Answers2