How to navigate to a specific route in a list full of the same widget?

Question

I have a an app which the user is able to add in books and it upload to the firestore database, and then I use a streamBuilder() to recieve all the data and display it in a list of GestureDetector() with the card() as a child.

Here is the code for the

final bookWidget = GestureDetector(
                          key: ValueKey(loggedInUser.email),
                          onTap: () {
                            print(title);
                          },
                          child: Card(
                            semanticContainer: true,
                            clipBehavior: Clip.antiAliasWithSaveLayer,
                            child: Stack(
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Container(
                                      width: 100,
                                      height: 140,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(10),
                                        image: DecorationImage(
                                            fit: BoxFit.cover,
                                            image: NetworkImage(bookCoverURL)),
                                      ),
                                    ),
                                    Container(
                                      width: 230,
                                      //color: Colors.red,
                                      child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.center,
                                        children: [
                                          Text(
                                            category.toString(),
                                            style: TextStyle(
                                              color: Colors.grey,
                                              fontStyle: FontStyle.italic,
                                            ),
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(top: 10),
                                            child: Text(
                                              title.toString(),
                                              style: TextStyle(
                                                fontWeight: FontWeight.bold,
                                                fontSize: 17,
                                              ),
                                            ),
                                          ),
                                          Container(
                                            margin: EdgeInsets.only(top: 10),
                                            child: Text(
                                              (author),
                                              style:
                                                  TextStyle(color: Colors.grey),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    Icon(
                                      Icons.arrow_forward_ios,
                                      color: Colors.black,
                                      size: 15,
                                    )
                                  ],
                                ),
                              ],
                            ),
                            //color: Colors.yellowAccent,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            elevation: 5,
                            margin: EdgeInsets.all(10),
                          ),
                        );

                        bookWidgets.add(bookWidget);

And then I display all my code in the screen by :

  Column(
   children: bookWidgets,
  )

But how can I make the app navigate to a new screen when the user pressed on a specific card()? Since all of them are the same widget and have no unique identifier?

Any help is greatly appreciated! Thank you!

Answer 1

You will need to create an identifier to pass (in this case “book”). In Flutter, these are necessary when calling or passing an object.

However, in regards to using Named Routes , this can allow you to send the data without the identifier but is considered bad practice in coding as you would not have a reference to the call or be able to back trace through the data.

Keeping the above in mind, it is possible to use the OnTap() inside each child card container so that on handle clicks or tap gestures, the user is taken to a different screen using routes as it is part of the GestureDetector class.

Answer 2

     GestureDetector(
                      key: ValueKey(loggedInUser.email),
                      onTap: () {
                        Navigator.pushNamed(
                        context,
                        '/routeNameHere',
                        arguments: id,
                        );
                      },
                    )

In parameter arguments: ID - you can change the id by the id of the card that you want to navigate to.

You must create a page for the display detail of the card, which just displays a card with same id in the argument. So on your new page, create a variable for receiving the argument, e.g.:

final cardId = ModalRoute.of(context).settings.arguments as String;

So the page can display the card depending on the cardId.