Error when trying to make portion of page scroll - flutter

Question

I keep getting errors when I try to make a portion of the page be able to scroll by adding SingleChildScrollView.
So this is how it looks like now:
So the portion in between the red lines is what I want to be able to scroll as I would be adding more things in later. Here is my current code :
class _NonAdminFlightPageState extends State<NonAdminFlightPage> {
#override
void initState() {
super.initState();
}
String _dateSelected = null;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: blue,
body:
SingleChildScrollView(
child: Center(
child:Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/FlightBackground.jpg",
),
fit: BoxFit.fitHeight,
),
)
),
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration:BoxDecoration(color: blueTrans),),
),
Align(
alignment:Alignment.center,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width/1.2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(flex:2,child: SizedBox(),),
StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection("Users")
.document(widget.userEmail)
.collection("Flight Data")
.document("Courses")
.collection(widget.courseAbbr)
.snapshots(),
builder: (context, snapshot){
if (snapshot.hasError) return new Text('${snapshot.error}');
if(snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
}
return Theme(
data: ThemeData(canvasColor: blackTrans2, brightness: Brightness.dark),
child:Container(
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child:DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: _dateSelected,
hint: AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,),
isDense: false,
onChanged: (String newValue){
setState(() {
_dateSelected = newValue;
});
},
items: snapshot.data.documents.map((DocumentSnapshot document){
return DropdownMenuItem<String>(
value: document.documentID,
child: AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,),
);
}).toList(),
),
),
)
)
);
},
),
Expanded(child: SizedBox(),),
Expanded(
flex: 25,
child:StreamBuilder<DocumentSnapshot>(
stream: Firestore.instance
.collection("Users")
.document(widget.userEmail)
.collection("Flight Data")
.document("Courses")
.collection(widget.courseAbbr)
.document(_dateSelected).snapshots(),
builder: (context, snapshot){
if (snapshot.hasError) {
return new Text('${snapshot.error}');
} else if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
} else {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
default:
var doc = snapshot.data;
// can execute animation here to make select flight glow
if (_dateSelected == null) {
return (Center(child: SizedBox(),));
}
return Column(
children: <Widget>[
Expanded(
flex: 8,
child: Container(
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: Column(
children: <Widget>[
Expanded(child: SizedBox(),),
Expanded(flex:1,child:AutoSizeText(NA_FLIGHT_PAGE_PATTERN, style: TextStyle(color: white,),textAlign: TextAlign.center,),),
Expanded(child:Divider(color: white,)),
Expanded(flex:8,child:ListView.builder(
padding: EdgeInsets.only(top: 0.0),
scrollDirection: Axis.vertical,
shrinkWrap: false,
itemCount: _dateSelected == null ? 0 : doc["patterns"].length ,
itemBuilder: (BuildContext context, int index) {
var patterns = doc["patterns"];
return buildPatternTile(patterns[index]);
}
),),
Expanded(child: SizedBox(),),
],
),
),
),
],
);
}
}
},
),
),
Expanded(child: SizedBox(),),
],
),
),
),
],
)
)
)
);
}
What I've tried:
Expanded(
flex: 25,
child:SingleChildScrollView(
child:StreamBuilder<DocumentSnapshot>(
.....
I've tried to wrap the 2nd StreamBuilder in a SingleChildScrollView but I get this exception thrown:
I/flutter ( 2714): Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 2714): Another exception was thrown: RenderBox was not laid out: RenderFlex#bafcc relayoutBoundary=up1 NEEDS-PAINT
I/flutter ( 2714): Another exception was thrown: RenderBox was not laid out: RenderFlex#bafcc relayoutBoundary=up1 NEEDS-PAINT
I managed to make the portion I wanted scrollable with ListView however this is using a FIXED container size with MediaQueryfor Patterns Completed. Is there any way to do so without fixing a height ? As you can see there is some extra unused space when I fix the height:
Expanded(
flex: 25,
child:StreamBuilder<DocumentSnapshot>(
stream: Firestore.instance
.collection("Users")
.document(widget.userEmail)
.collection("Flight Data")
.document("Courses")
.collection(widget.courseAbbr)
.document(_dateSelected).snapshots(),
builder: (context, snapshot){
if (snapshot.hasError) {
return new Text('${snapshot.error}');
} else if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
} else {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
default:
var doc = snapshot.data;
// can execute animation here to make select flight glow
if (_dateSelected == null) {
return (Center(child: SizedBox(),));
}
return ListView(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height*2/3,
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child: ListView.builder(
padding: EdgeInsets.only(top: 0.0),
scrollDirection: Axis.vertical,
shrinkWrap: false,
itemCount: _dateSelected == null ? 1 : doc["patterns"].length + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Column(
children: <Widget>[
ListTile(
selected: false,
title: AutoSizeText(
NA_FLIGHT_PAGE_PATTERN,
maxLines: 1,
style: TextStyle(
color: white,
),
textAlign: TextAlign.center,
),
),
Divider(color: white,)
],
);
}
index -= 1;
var patterns = doc["patterns"];
return buildPatternTile(patterns[index]);
}
),
),
],
);
}
}
},
),
),

Answer 1

SingleChildScrollView use when you have a single box. I will suggest you to Use ListView
Here is the sample you can put your views directly
ListView(
padding: const EdgeInsets.all(8.0),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
This is the best way if you want to scroll the views between the multiple widgets