Allow flutter Column to take all the available Space in this kind of layout

Question

I've a ListView.builder on my page which wraps Columns inside it according to various parameters.

My code looks something like this :

ListView.builder(
  itemCount: sortedList.length,
  itemBuilder: (BuildContext context, int index) {
    Render Column 1,
    Render Column 2,
    Render Column 3
}

My columns look something like this :

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
   Child 1,
   Child 2,
  ]
)

What I want ? Now coming over to Column 3, I want it's one child to show at the top and one at the bottom of the screen. Something like this:

As you can see, I want Column 3 to take all the page's available space and then it can align one of its child to the top and one to the bottom inside itself. I can do this by simply adding MainAxisAlignment.spaceBetween but right now I don't know how can I allow this Column to take all the available space inside of this ListView.

Can anyone please tell me what we can do here? Thanks in advance!

CbL · Accepted Answer · 2022-05-19T08:29:20.847

3

To fill the remaining spacing, you may need to use CustomScroll, some sliver widgets that fit you and SliverFillRemaining which is use to fill the remaining spacing of the scroll view. You may try the following example on dartpad

@override
Widget build(BuildContext context) {
return CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Container(color: Colors.red, height: 50.0),
          Container(color: Colors.purple, height: 75.0),
        ],
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Container(
        color: Colors.green,
        child: const Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('remaining'),
        ),
      ),
    ),
  ],
);
}

edited May 19 '22 at 08:29

answered May 19 '22 at 08:09

CbL

734
5
22

Interesting. How do i put itemExtent dynamically ? I mean just in case I don't want to give it a fixed height ? The Column 1 changes based on user parameters. It could be 10 px in height or 100 px in height. – Divyam Dhadwal May 19 '22 at 08:23
You can try to use the SliverList and SliverChildListDelegate for dynamic height Column 1 and 2. I updated the example, you may check. – CbL May 19 '22 at 08:30

score 0 · Answer 2 · answered May 19 '22 at 09:51

If you don't rely on the list view, you can use this approach:

return Scaffold(
    body: Builder(
  builder: (context) => SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(
        minHeight: MediaQuery.of(context).size.height,
      ),
      child: IntrinsicHeight(
        child: SafeArea(
          child: Column(
            children: [
              Column(
                children: [
                  Text('Column1'),
                ],
              ),
              Column(
                children: [
                  Text('Column2'),
                ],
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Column 3 child 1'),
                    Text('Column 3 child 2'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
));

Allow flutter Column to take all the available Space in this kind of layout

2 Answers2