How to do use random list from firebase in flutter?

Question

I'm reading a user list from firebase and sending it to ListTile, but the incoming data comes in alphabetical order. I want this data to come randomly. Does anyone know about this?

FutureBuilder(
  future: FirebaseFirestore.instance
      .collection('users')
      .get(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    }
    return ListView.builder(
      itemCount: (snapshot.data! as dynamic).docs.length,
      padding: EdgeInsets.zero,
      itemBuilder: (context, index) {
        return InkWell(
          onTap: (){},
          child: ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                (snapshot.data! as dynamic).docs[index]['photoUrl'],
              ),
              radius: 30,
            ),
            trailing: ClipOval(
              child: Container(
                width: 10,
                height: 10,
                color: Colors.green,
              ),
            ),
            title: Text(
              (snapshot.data! as dynamic).docs[index]['username'], style: TextStyle(color: Colors.white, fontSize: 20),
            ),
            subtitle: Text((snapshot.data! as dynamic).docs[index]['bio'],style: TextStyle(color: Colors.white70,fontSize: 14,)),
          ),
        );
      },
    );

Answer 1

Try this code.

It is good practice to use variables instead of repeating long statements several times.

Bad

(snapshot.data! as dynamic).docs

Good:

final randomizedList = (snapshot.data! as QuerySnapshot).docs;

This will make your code more extensible for new features like what you are trying to do in a single clean line.

randomizedList.shuffle();

Full code:

 FutureBuilder(
    future: FirebaseFirestore.instance.collection('users').get(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) {
        return const Center(
          child: CircularProgressIndicator(),
        );
      }
      final randomizedList = (snapshot.data! as QuerySnapshot).docs;
      randomizedList.shuffle();
      return ListView.builder(
        itemCount: randomizedList.length,
        padding: EdgeInsets.zero,
        itemBuilder: (context, index) {
          return InkWell(
            onTap: () {},
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(
                  randomizedList[index]['photoUrl'],
                ),
                radius: 30,
              ),
              trailing: ClipOval(
                child: Container(
                  width: 10,
                  height: 10,
                  color: Colors.green,
                ),
              ),
              title: Text(
                randomizedList[index]['username'],
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
              subtitle: Text(randomizedList[index]['bio'],
                  style: TextStyle(
                    color: Colors.white70,
                    fontSize: 14,
                  )),
            ),
          );
        },
      );
    },
  );

Answer 2

You can shuffle the list instead

return ListView(
                      shrinkWrap: true,
                      children:
                          snapshot.data!.docs.map((DocumentSnapshot document) {
                        Map<String, dynamic> data =
                            document.data()! as Map<String, dynamic>;
                        return ListTile(
                          leading: ClipOval(
                              child: CircleAvatar(
                                radius: 30,
                                backgroundImage: NetworkImage(data['photoUrl']),
                                backgroundColor: Colors.red,
                              ),
                            ),
                          title: Text(data['username']),
                          subtitle: Text(data['bio']),
                        );
                      }).toList().shuffle(),//shuffle here
                    );

Edit

In the codethat you edited you can create a variable that holds the list

var finalList = (snapshot.data! as dynamic).docs.shuffle();

Now you can use this final list inside the list builder

EDIT2

var finalList = (snapshot.data! as dynamic).docs.toList().shuffle();
return ListView.builder(
                itemCount: finalList.length,
                padding: EdgeInsets.zero,
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: (){},
                    child: ListTile(
                      leading: CircleAvatar(
                        backgroundImage: NetworkImage(
                          finalList[index]['photoUrl'],
                        ),
                        radius: 30,
                      ),
                      trailing: ClipOval(
                        child: Container(
                          width: 10,
                          height: 10,
                          color: Colors.green,
                        ),
                      ),
                      title: Text(
                        finalList[index]['username'], style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                      subtitle: Text(finalList[index]['bio'],style: TextStyle(color: Colors.white70,fontSize: 14,)),
                    ),
                  );
                },
              );