Question 160544 in Flutter Question posted in
The official Flutter documentation can be found here.

Can a SingleChildScrollView be nested inside Columns?

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 SingleChilScrollView so that the remaining space after ElevatedButton has been placed should be the scrollable area so that it has a height constraint.

Would be grateful if someone could explain the fix for this in detail as that would help me clear out my concept. Thank you.

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.

Tags:

2

Answers


  1. 0

    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"),
                ),
              ],
            ),
          ),
        );
    Login or Signup to reply.
  2. 0

    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"),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search