skip to Main Content

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

2

Answers


  1. 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,)),
                        ),
                      );
                    },
                  );
    
    Login or Signup to reply.
  2. 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,
                      )),
                ),
              );
            },
          );
        },
      );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search