How to add a Spacer in a ListView

Question

Right now I am using a column to display several widgets:

Column(
  children: [
    Text('1'),
    Text('2'),
    Spacer(),
    Text('3'),
    Text('4'),
  ],
),

So the screen looks like this:

---
 1
 2



 3
 4
---

It allows me to always align '1' and '2' at the top and '3' and '4' at the bottom of my widget independently of its size.

---

However, when the widget becomes too small, it overflows:

---
 1
 2
 3
---
 4  // <- Overflow

Because of this, I would like to achieve the same result with a ListView so:

• When the widget is high enough, '1' '2' are top-aligned and '3' '4' are bottom-aligned.
• When the widget is not high enough, there is no extra space anymore between '2' and '3', but the user can scroll down.

---

I couldn't manage to use a Spacer a ListView. It throws me the error:

Failed assertion: line 1940 pos 12: 'hasSize'

---

What would be the correct way to implement it?

Sisera

This might be helpful: https://mcmap.net/q/849576/-fix-last-element-of-listview-to-the-bottom-of-screen – Priapism

This is not what I'm trying to achieve. In the question you sent, the footer is "sticky"/"not scrollable", I want all my items to be scrollable – Sisera

Answer 1

Try adding the Text('1') and Text('2') to a Column and Text('3') and Text('4') to another Column. Then add these two columns to an Expanded parent column and main axis alignment for the parent column as spaceBetween. Similar to the code below:

  Expanded(
    ParentColumn(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children:[
        Column1(
          children: [
            Text('1'),
            Text('2'),
           ],
        ),
        Column2(
          children: [
            Text('3'),
            Text('4'),
           ],
        ),
      ],
    ),
  )

Twelvemo

Hello, but this wouldn't be scrollable if the widget is small right? – Sisera

Answer 2

I've create a widget for this exact purpose, below is the code snippet for the same, replace your SingleChildScrollView with SpaceBetweenScrollView, just use the child field for top part and footer field for the bottom part, and you're good to go.

import 'package:flutter/material.dart';

class SpaceBetweenScrollView extends StatefulWidget {
  const SpaceBetweenScrollView({
    Key? key,
    required this.child,
    required this.footer,
    this.padding = const EdgeInsets.all(16.0),
  }) : super(key: key);

  final Widget child;
  final Widget footer;
  final EdgeInsets padding;

  @override
  State<SpaceBetweenScrollView> createState() => _SpaceBetweenScrollViewState();
}

class _SpaceBetweenScrollViewState extends State<SpaceBetweenScrollView> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return SingleChildScrollView(
        padding: widget.padding,
        keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
        child: Container(
          width: double.infinity,
          constraints: constraints.copyWith(
            minHeight: constraints.maxHeight - (widget.padding.top + widget.padding.bottom),
            maxHeight: double.infinity,
          ),
          child: IntrinsicHeight(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [widget.child, widget.footer],
            ),
          ),
        ),
      );
    });
  }
}

Ciliate

Answer 3

You can do the exact same thing by using CustomScrollView. I am using this same code for this exact problem at work

Code example:

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Column(
        children: <Widget>[
          Container() // widget 1,
          Container() // widget 2,
        ],
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          Spacer(), // important
          Container() // widget 3,
          Container() // widget 4,
        ],
      ),
    ),
  ],
);

Tumefacient