Listview with scrolling Footer at the bottom

Question

I\'m trying to create a scrolling list widgets which takes displays a few items and has the ability to add a footer at the bottom which scrolls along.

If the scrolli

Answer 1

This can be achieved by using a SingleChildScrollView with special constraints, as explained here.

Take a look at the example below:

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: constraints.copyWith(
            minHeight: constraints.maxHeight,
            maxHeight: double.infinity,
          ),
          child: IntrinsicHeight(
            child: Column(
              children: [
                Container(height: 200, color: Colors.blue),
                Container(height: 200, color: Colors.orange),
                Container(height: 200, color: Colors.green),
                Container(height: 50, color: Colors.pink),
                Expanded(
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      width: double.infinity,
                      color: Colors.red,
                      padding: EdgeInsets.all(12.0),
                      child: Text('FOOTER', textAlign: TextAlign.center,),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  );
}

This builds the following layout:

If you change the height of the pink container to something larger, say 500, you will see the footer also scrolls with the entire list.

Thanks to Simon Lightfoot for his help pointing me in the right direction!