'Flutter Firestore StreamBuilder and ListView.builder() how to show index number
I have a collection called users from Firebase as users. I can list the users in this collection. but while listing, I want to print these users to the list with their index number. like 1 2 3 4 5 6 7
class UserInformation extends StatefulWidget {
const UserInformation({Key? key}) : super(key: key);
@override
_UserInformationState createState() => _UserInformationState();
}
class _UserInformationState extends State<UserInformation> {
final Stream<QuerySnapshot> _usersStream = FirebaseFirestore.instance
.collection('users')
.orderBy("score", descending: true)
.limit(7)
.snapshots();
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: _usersStream,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return const Text('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
return ListView(
shrinkWrap: true,
children: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
return Card(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
leading: const Text("1"), //show index number
title: Center(child: Text(data['userName'])),
trailing: Text(data['score'].toString()),
),
);
}).toList(),
);
},
);
}
}
Solution 1:[1]
You can use ListView.builder which gives you index in its builder argument.
example is
@override
Widget build(BuildContext context) {
List<String> names = <String>["John","Crea","Mike","Andy"];
return MaterialApp(
home: SafeArea(
child: Scaffold(
body:ListView.builder(
itemCount: names.length,
itemBuilder: (context, index) {
return Row(
children: [
Text('Index : ${index+1}'),
Text('Name is : ${names[index]}')
],
);
},),
),
),
);
}
Solution 2:[2]
StreamBuilder<List<EnquiryModel>>(
stream: FirebaseApi().getEnquiry(),
builder:
(BuildContext context, AsyncSnapshot<List<EnquiryModel>> snapshot) {
if (snapshot.hasError) return Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return const Center(child: CircularProgressIndicator());
default:
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, int index) {
return Text('${index + 1}');
});
}
},
),
// Try this
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Yaseen |
| Solution 2 | Vinamra Jaiswal |

