CODEWITHSUNDEEP
flutterflutter-layout
F.M.
F.M.

Reputation: 760

Flutter SingleChildScrollViewheight to screen height

I have a Column and three elements in it. I set the mainAxisAlignment to MainAxisAlignment.spaceBetween, so that the first Element is on top of my app. The second in the middle and the third at the bottom. Now I want to wrap that in a scroll view so that if the content of the Column is taller than the view it can be scrolled. For example that happens when the keyboard pops up.

My code looks kinda like that:

Column(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: [
      Element1(),
      Element2(),
      Element3(),
      ]
)

The Column expands its height over the entire screen. And that is what I also want.

But now if I wrap it in a SingelChildScrollView it shrinks to the min content height. :(

SingleChildScrollView(
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
         Element1(),
         Element2(),
         Element3(),
         ]
   ),
)

Is there a way that the Column continues to expand over the entire view height of the screen and is scrollable as soon it's content is taller that the screen height?

Upvotes: 3

Views: 1394

Answers (1)

TheMisplacedMechEngineer
TheMisplacedMechEngineer

Reputation: 619

You should be able to do this by using ConstrainedBox and LayoutBuilder which will force the Column to take the max available height

LayoutBuilder(
      builder: (context, constraints) => SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: constraints.maxHeight,
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Element1(),
                Element2(),
                Element3(),
              ]),
        ),
      ),
    )

Upvotes: 8

Related Questions