How to simulate spaceBetween behavior in a listView?

Question

I have a Column of items like this:

Column(
  children: [
    ...items,
    Spacer(),
    Footer(),
  ],
)

However, the items list may be dynamic, which makes necessary use a ListView instead of Column. The only problem is that my Footer was separated with anSpacer, the Spacer widget will throw error if its used in a ListView.

What can I use to give the effect of a Column to my ListView when are just a few items that not filled all the screen?

A Container with a predefined height and width and color, nothing fancy — Esteban Muñoz, Mar 05 '23 at 23:22

score 0 · Answer 1 · edited Mar 05 '23 at 22:20

0

I found this solution:

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate(items),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Footer(),
    ),
  ],
),

edited Mar 05 '23 at 22:20

My Car

4,198
5
17
50

answered Mar 05 '23 at 22:10

Esteban Muñoz

308
2
7

But how did you manage to give the Space which was earlier provided by `Spacer` ? I guess this solution will place the `Footer` on the top of the remaining space – krishnaacharyaa Mar 06 '23 at 04:54
1

You are right, I forgot to add that I had to set my Footer in a ```Column``` with ```MainAxisAlignment.end``` – Esteban Muñoz Mar 06 '23 at 13:19

score 0 · Answer 2 · answered Mar 06 '23 at 06:54

0

You can use SizeBox(heigth:your hieght) instead of Spacer();

answered Mar 06 '23 at 06:54

Sukaina Ahmed

112
1
10

score 0 · Answer 3 · answered Mar 06 '23 at 07:00

This is the issue I had a lot when I was still learning.

I think you have a same issue,

Step 1: You shouldn't use SingleChildScrollView as a parent of that Column.

Step 2: Use Expanded Widget inside the Column.

Step 3: Inside the Expanded use another Column and put those items.

For example:

Column(
  children: [
    Expanded(
      child: Column(
       children: [
         ...items,
      ],
    ),
    Footer(),
  ],
)

You can have the scroll behaviour for that 2nd Column by giving SingleChildScrollView or use any ListView

How to simulate spaceBetween behavior in a listView?

3 Answers3