Flutter end of ListView from data in Firestore - flutter

Question

I'd like to add some empty tiles to the bottom of my listview so that I can put "See More" button on that part. The data I'm displaying on the screen is from Firebase. This is something I learned from YouTube tutorials. This is my code.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: StreamBuilder(
stream: Collection.limit(10).snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
return !snapshot.hasData
? Center(child: CircularProgressIndicator())
: ListView(
children: snapshot.data!.docs.map((document) {
return Center(
child: Card(
margin: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 1.0),
child: ListTile(
title: Text(document['title']),
subtitle: Text(document['body']),
onTap: () async { },
),
),
);
}).toList(),
);
},
),
);
}
Some people have already advised me to use ListView.builder, but I'm not sure how to implement it in my code. I repeatedly tried to use ListView.Builder but failed.

Answer 1

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: StreamBuilder(
stream: Collection.limit(10).snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (_, index) => Center(
child: Column(
children: [
Card(
margin: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 1.0),
child: ListTile(
title: Text("some text"),
subtitle: Text("some text"),
onTap: () async {},
),
),
TextButton(onPressed: () {}, child: Text("See More"))
],
)));
},
),
);
}