Reputation: 57
I am working on a Flutter project that uses Firebase and has a StreamBuilder that creates a card that is similar to a blog App. Whenever I add a lot of "blogs", I get a bottom Overflow error and when I wrap body: MemoirsList(),
in a SingleChildScrollView, the app won't let me scroll down.
Here is the code for the MemoirsList():
Widget MemoirsList() {
return Container(
child: memoirsStream != null
? ListView(
shrinkWrap: true,
children: <Widget>[
StreamBuilder(
stream: memoirsStream,
builder: (context, snapshot) {
return ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 16),
itemCount: snapshot.data.documents.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return MemoirsCard(
authorName: snapshot.data.documents[index].data['authorName'],
title: snapshot.data.documents[index].data["title"],
description: snapshot.data.documents[index].data['description'],
imgUrl: snapshot.data.documents[index].data['imgURL'],
);
});
},
)
],
)
: Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
),
);
}
Code for MemoirsCard():
class MemoirsCard extends StatelessWidget {
String imgUrl, title, description, authorName;
MemoirsCard({@required this.imgUrl, @required this.title, @required this.description, @required this.authorName});
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 20),
height: 200,
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.network(
imgUrl,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover
)
),
Container(
height: 200,
decoration: BoxDecoration(
color: Colors.black54.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
),
Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w700
),
),
SizedBox(height: 8),
Text(
description,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400
)
),
],
),
),
],
)
);
}
}
Upvotes: 1
Views: 850
Reputation: 57
Here is the final code for anyone who is wondering:
Widget MemoirsList() {
return SingleChildScrollView(
child: memoirsStream != null
? Column(
children: <Widget>[
StreamBuilder(
stream: memoirsStream,
builder: (context, snapshot) {
if(snapshot.data == null) return CircularProgressIndicator(); //Removes called documents on null error
return ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 16),
itemCount: snapshot.data.documents.length,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return MemoirsCard(
authorName: snapshot.data.documents[index].data['authorName'],
title: snapshot.data.documents[index].data["title"],
description: snapshot.data.documents[index].data['description'],
imgUrl: snapshot.data.documents[index].data['imgURL'],
);
});
},
)
],
)
: Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
),
);
}
Upvotes: 1
Reputation: 34180
Listview.Builder
inside Listview
, it's not a good option which the flutter suggest you
Just replace top Listview
with Column
Modify code like this
SingleChildScrollView(
child: Column(
children: <Widget>[
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
...
Upvotes: 1