How to do use random list from firebase in flutter?-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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