What is the optimal way to create a scrollable column with space between items?

Jocko 0
Viewed 15

Something I encounter alot is creating a scrollable column with space between items.

SingleChildScrollView(child: 
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
children: ...))

This doesn't work unless you give the Column a fixed height.

ListViews don't set space between.

What is the best way to do this? Appreciate if someone can advise. Thank you in advance!

flutter-layout dart flutter
2 Answers
userHuw710

If you like to use spaceEvenly, just use

body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [..]

But to make it scrollable, You can include SizedBox on column to have fixed/dynamic space between item.

return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("top widget"),
      SizedBox(
        height: 200,
      ),
      Text("bottom widget"),
    ],
  ),
);
}

Or better

return Scaffold(
  body: LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return SingleChildScrollView(
        child: Column( 
          children: [
            Text("top widget"),
            SizedBox(
              height: constraints.maxHeight * .4,
            ),
            Text("bottom widget"),
          ],
        ),
      );
    },
  ),
);

More about layout

Yeasin Sheikh0
Related