'Multiplayer Quiz app with Firebase Realtime Database

I am learning firebase-s realtime db through small multiplayer quiz project. My idea is to have two players simultaneously answer question and them both try to answer to as much as possible questions in 60 seconds.

So we would get question who answers first data his answer gets submitted and we get next question and so on...

The idea is to have boolean field called answered in the database that would change to true onTap but my problem is how to handle page change since it would be PageView of questions.

I have set a streambuilder that generates PageView but having problem handling that database field listener.

I have no working code unfortunatelly besides StreamBuilder/PageView that looks like this.

    return Scaffold(
        appBar: AppBar(
          title: Text("Lobby"),
        ),
        body: StreamBuilder(
            stream: _database.orderByKey().onValue,
            builder: (context, snapshot) {
              List<FirstRoundQuestion> frqList = [];
              if (snapshot.hasData) {
                (snapshot.data! as DatabaseEvent)
                    .snapshot
                    .children
                    .forEach((snapshot) {
                  final frq = Map<String, dynamic>.from(
                      snapshot.value as Map<dynamic, dynamic>);
                  frqList.add(FirstRoundQuestion(
                      question: frq['question'],
                      answer: frq['answer'],
                      answered: frq['answered']));
                });

                return PageView.builder(
                  reverse: true,
                  physics: const NeverScrollableScrollPhysics(),
                  controller: _controller.pageController,
                  itemCount: frqList.length,
                  itemBuilder: (context, index) {
                    return Column(
                      children: [
                        Text(frqList[index].question),
                        TextButton(
                          
                            onPressed: () => {
                                  ///function placeholder
                                },
                            child: Text('${frqList[index].answered}'))
                      ],
                    );
                  },
                );
              } else {
                return const CircularProgressIndicator();
              }
            }));

Maybe I am completely wrong with how to go about this quiz app, any answer/advise would be helpfull :)



Sources

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

Source: Stack Overflow

Solution Source