How can I make the whole page scrollable? - widget

Question

Instead of just scrollable FirebaseAnimatedList, I want to make the whole page scrollable i.e. the parent Column widget that includes the form and the FirebaseAnimatedList.
I'm stuck at this since long and tried various different widget but couldn't make it.
Please Help.
Column(
children: <Widget>[
Flexible(
flex: 0,
child: Center(
child: Form(
key: formkey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(Icons.subject),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.subject = val,
validator: (val) => val == "" ? val : null,
),
),
ListTile(
leading: Icon(Icons.message),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.body = val,
validator: (val) => val == "" ? val : null,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
child: Text(
"POST",
style: TextStyle(color: Colors.white),
),
color: Colors.blueGrey,
onPressed: () {
handleSubmit();
},
),
),
],
),
),
),
),
Flexible(
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation, int index) {
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueAccent,
),
title: Text(boardMessages[index].subject),
subtitle: Text(boardMessages[index].body),
),
);
},
),
),
],
),
With SingleChildScrollView I'm able to scroll the page by holding form widget but it doesn't scroll by holding the FirebaseAnimatedList widget.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: new ConstrainedBox(
constraints: new BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
height: 180.0,
child: Center(
child: Form(
key: formkey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(Icons.subject),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.subject = val,
validator: (val) => val == "" ? val : null,
),
),
ListTile(
leading: Icon(Icons.message),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.body = val,
validator: (val) => val == "" ? val : null,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
child: Text(
"POST",
style: TextStyle(color: Colors.white),
),
color: Colors.blueGrey,
onPressed: () {
handleSubmit();
},
),
),
],
),
),
),
),
new Container(
height: 2000.0,
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation, int index) {
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueAccent,
),
title: Text(boardMessages[index].subject),
subtitle: Text(boardMessages[index].body),
),
);
},
),
),
],
),
),
);
},
)
And what should be the height of Container containing the FirebaseAnimatedList?

Answer 1

Try changing Column() to ListView() as so
also try adding a listview on the outside of your FirebaseAnimatedList
Container()
ListView(
children: <Widget>[
Flexible(
flex: 0,
child: Center(
child: Form(
key: formkey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(Icons.subject),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.subject = val,
validator: (val) => val == "" ? val : null,
),
),
ListTile(
leading: Icon(Icons.message),
title: TextFormField(
initialValue: "",
onSaved: (val) => board.body = val,
validator: (val) => val == "" ? val : null,
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
child: Text(
"POST",
style: TextStyle(color: Colors.white),
),
color: Colors.blueGrey,
onPressed: () {
handleSubmit();
},
),
),
],
),
),
),
),
Flexible(
child: FirebaseAnimatedList(
query: databaseReference,
itemBuilder: (_, DataSnapshot snapshot,
Animation<double> animation, int index) {
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blueAccent,
),
title: Text(boardMessages[index].subject),
subtitle: Text(boardMessages[index].body),
),
);
},
),
),
],
),

Answer 2

You want the whole page to be scrollable which means it need to wrap the content inside ScollView(ListView).
Which will make having scrollView(FirebaseAnimatedList) inside an another ScrollView(ListView). Flutter cannot handle this by its own. We have to give some more information to it.
Options:
Provide the height for the inner scrollView.
Container(
height: 500.0, //some constant value
child: FirebaseAnimatedList(...))
It doesn't scroll by holding the FirebaseAnimatedList widget.
Make the innerScollView not scrollable.
FirebaseAnimatedList(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: ...)
It does scroll by holding the FirebaseAnimatedList widget. Note: But it will load all the elements in the list(say you have 200 items, it will load all 200 items whether the item is visible or not).

Answer 3

You can add FirebaseAnimatedList and other items in ListView, like below:
ListView(
shrinkWrap: true,
children: <Widget>[
_buildCard(),
FirebaseAnimatedList(...),
]);
You should disable FirebaseAnimatedList scroll too
FirebaseAnimatedList(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true, ...)