How to use firebase data to navigate on and on in flutter?

Question

I learned how to navigate to other page and pop it but with the logic I drew up above, I have no idea how to do it. (I wasn't able to find something similar on internet). The comments in the images are created by users and once it is submitted, it is listed in ListView.builder using firebase. How do I make it that when user select 1 comment, it navigates to new page automatically that hasn't been created? Is it even possible? Thank you in advance

  body: Padding(
        padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 200,
                child: Text('Chapter 1'),
                margin: EdgeInsets.all(20.0),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.shade600,
                        offset: Offset(4, 4),
                        blurRadius: 13,
                      ),
                      BoxShadow(
                        color: Colors.white,
                        offset: Offset(-4, -4),
                        blurRadius: 13,
                      )
                    ]),
              ),            
              Container(
                  child: StreamBuilder<QuerySnapshot>(
                    stream: users,
                    builder: (BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (snapshot.hasError) {
                        return Text('Something went wrong.');
                      }
                      if (snapshot.connectionState ==
                          ConnectionState.waiting) {
                        return Text('Loading');
                      }

                      final data = snapshot.requireData;

                      return ListView.builder(
                        physics: ScrollPhysics(),
                        shrinkWrap: true,
                          itemCount: data.size,
                          itemBuilder: (context, index) {
                            return Card(
                              child: ListTile(
                                onTap: () {
                                  print('${data.docs[index]['name']}\n${data.docs[index]['age']}');
                                },
                                title: Text('${data.docs[index]['name']}\n${data.docs[index]['age']}'),
                              ),
                            );
                          });
                    },
                  )
              ),

Here is an actual app for better understanding

Answer 1

Are you displaying the details of list-tiles clicked by users on the container? If so, you don't have to navigate to new page. You can just change the display section based on click. Also, because when you go to new page it usually means item> item_detail, we don't display items list on new page.

Logic will be like

Column[DetailContainer, ListView(ListTiles)]

On List Click change Detail Container's content.

But If you want to change pages, then you should use Navigator 2.0 packages like go_router and state management like Provider.