'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]}')
                ],
              );
            },),
        ),
      ),
    );
  }

enter image description here

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