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, ), ], ); }}