'Flutter/Firebase: build page depending on database

I'm trying to build a simple card game app to play online with friends using Flutter and Firebase. The way it works (for now), is we have lobbies which players can join and set their state as ready or notReady. Joining rooms and setting the state is synchronized with Firebase.

So Firebase has a list of lobbies, which have a list of players which all have a name and a isReady parameter. Currently, we display the list of players in real time as well as their state in real time. What I can't figure out is how to check if all players are ready and display a countdown that will then take them to the game page.

Even if we forget the countdown idea, I have no idea how to check for readiness and automatically go to the game page after a slight delay.

Any help is greatly appreciated, here's the code just in case!

class _GameRoomPageState extends State<GameRoomPage> {
  bool isReady = false;
  late DatabaseReference ref;

  @override
  Widget build(BuildContext context) {
    ref = FirebaseDatabase.instance.ref('rooms/${widget.roomId}/players');
    return Scaffold(
      appBar: AppBar(
          title: Text(widget.roomName),
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () {
              deletePlayerFromRoom();
              Navigator.pop(context);
            },
          )),
      floatingActionButton: FloatingActionButton.extended(
        label: isReady ? const Text("I'm not ready !") : const Text("I'm ready !"),
        icon: isReady ? const Icon(Icons.cancel_outlined) : const Icon(Icons.check),
        onPressed: () {
          setState(() {
            isReady = !isReady;
            final postData = {'name': globals.username, 'isReady': isReady};
            final Map<String, Map> updates = {};
            updates[globals.userId] = postData;
            ref.update(updates);
          });
        },
      ),
      body: Column(
        children: [
          Flexible(
            child: FirebaseAnimatedList(
                query: ref,
                itemBuilder: (BuildContext context, DataSnapshot snapshot_, Animation<double> animation, int index) {
                  Map players = snapshot_.value as Map;
                  players['key'] = snapshot_.key;
                  return FutureBuilder<DataSnapshot>(
                    builder: (BuildContext context, snapshot) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          ListTile(
                            leading: Icon(players['isReady'] ? Icons.check_circle : Icons.person_outline),
                            title: Text(players['name']),
                            subtitle: Text(players['isReady'] ? 'is ready' : 'is not ready yet'),
                          ),
                        ],
                      );
                    },
                  );
                }),
          )
        ],
      ),
    );
  }



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source