How to create a scroll view with fixed footer with Flutter? How to create a scroll view with fixed footer with Flutter? dart dart

How to create a scroll view with fixed footer with Flutter?


Even though the RĂ©mi answer being right, I've actually found an easier way to achieve what I was looking for by just combining the LayoutBuilder with the IntrinsicHeight.

class ScrollableFooter extends StatelessWidget {  @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: <Widget>[               // Your body widgets here                Expanded(                  child: Align(                    alignment: Alignment.bottomCenter,                    child: // Your footer widget                  ),                ),              ],            ),          ),        ),      );    });  }}


For those who were looking to implement just footer with scrollview in a simple way, below code might help :

Scaffold(      appBar: buildAppBar('Some cool appbar'),      body: Column(        children: [          Expanded(            child: SingleChildScrollView(              child: Column(                children: [                  PackageCard(),                  PackageCard(),                  PackageCard(),                ],              ),            ),          ),          Container(            child: Text('Your super cool Footer'),            color: Colors.amber,          )        ],      ),    );

Visual representation:-

---Column    |    |---Expanded--                 |-SingleChildScrollView (column /YOUR SCROLLABLE VIEW)    |    |-Container(YOUR FOOTER)

I used expanded with SinglechildScrollView over here


How I solved this was to wrap the fixed Footer and The SingleChildScrollView in a Stack widget then align the Footer accordingly.

class ScrollableFooter extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Stack(      children: <Widget>[        SingleChildScrollView(          child: Container(            padding: EdgeInsets.all(5),            child: Column(              children: <Widget>[                // Your body widgets here              ],            ),          ),        ),        Align(          alignment: Alignment.bottomCenter,          child: // Your fixed Footer here,        ),      ],    );  }}