title: Flutter different screen navigation using on onTap uncertain ListView
body: <p>How can i navigate to a different route in ListView <code>querySnapshot.docs[index].data()['image']</code>. In my case all the cards will navigate to different route.
  Relevant code with facing this issue:</p>
  <pre><code>import 'dart:ui';
  import 'package:cached_network_image/cached_network_image.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_svg/flutter_svg.dart';
  import 'package:fluttertravelapp/screens/home.dart';
  import 'package:fluttertravelapp/screens/location_list_screen.dart';
  import 'package:fluttertravelapp/widgets/nav_drawer.dart';
  import 'package:cloud_firestore/cloud_firestore.dart';
  
  class SelectedCategoryScreen extends StatefulWidget {
    SelectedCategoryScreen();
    @override
    _SelectedCategoryScreen createState() =&gt; _SelectedCategoryScreen();
  }
  
  class _SelectedCategoryScreen extends State&lt;SelectedCategoryScreen&gt; {
    @override
    void initState() {
      super.initState();
    }
  
    final Query query = FirebaseFirestore.instance
        .collection(&quot;movies&quot;)
        .orderBy('year', descending: true);
  
    void gotoPage(String pageName) {
      switch (pageName) {
        case 'home':
          {
            // statements;
            Navigator.push(
                context, CupertinoPageRoute(builder: (redContext) =&gt; HomePage()));
          }
          break;
  
        case 'yard':
          {
            //statements;
            Navigator.push(
                context,
                CupertinoPageRoute(
                    builder: (redContext) =&gt; LocationListScreen()));
          }
          break;
  
        default:
          {
            throw new Exception(&quot;Path ${pageName} not supported&quot;);
          }
          break;
      }
    }
  
    /// Page Controller
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: Icon(Icons.arrow_back_ios_new_sharp),
          ),
          title: Container(
            width: 170,
            child: Image.network(
              'https://i.hizliresim.com/sf4asddsau.jpg',
            ),
          ),
          centerTitle: true,
          actions: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.cloud_queue_outlined),
            ),
          ],
        ),
        drawer: NavDrawer(),
        body: SafeArea(
          child: Container(
            child: StreamBuilder(
              stream: query.snapshots(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                } else if (snapshot.hasError) {
                  return Center(
                    child: Icon(Icons.error),
                  );
                }
                final QuerySnapshot&lt;Map&lt;String, dynamic&gt;&gt; querySnapshot =
                    snapshot.data;
                return ListView(
                  physics: BouncingScrollPhysics(),
                  children: &lt;Widget&gt;[
                    Container(
                      margin: EdgeInsets.only(top: 28.8, bottom: 16.8),
                      height: 724.8,
                      child: ListView.builder(
                        itemCount: querySnapshot.size,
                        padding: EdgeInsets.only(left: 28.8, right: 12),
                        scrollDirection: Axis.vertical,
                        physics: BouncingScrollPhysics(),
                        itemBuilder: (context, index) {
                          return Container(
                            height: 214.8,
                            width: 188.4,
                            margin: EdgeInsets.only(right: 16.8, bottom: 50),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(9.6),
                              image: DecorationImage(
                                fit: BoxFit.cover,
                                image: CachedNetworkImageProvider(
                                    querySnapshot.docs[index].data()['image'],
                                    maxHeight: 200,
                                    maxWidth: 200),
                              ),
                            ),
                            child: Stack(
                              children: &lt;Widget&gt;[
                                GestureDetector(
                                  onTap: () {
                                    GestureDetector(
                                        onTap: () =&gt; gotoPage(querySnapshot
                                            .docs[index]
                                            .data()['page']));
  
                                    /*  Navigator.push(
                                        context,
                                        CupertinoPageRoute(
                                            builder: (redContext) =&gt; MyApp()));*/
                                  },
                                ),
                                Positioned(
                                  bottom: 19.2,
                                  left: 19.2,
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(4.8),
                                    child: BackdropFilter(
                                      filter: ImageFilter.blur(
                                          sigmaY: 19.2, sigmaX: 19.2),
                                      child: Container(
                                        height: 26,
                                        padding: EdgeInsets.only(
                                            left: 0.0, right: 0.0),
                                        alignment: Alignment.centerLeft,
                                        child: Row(
                                          children: &lt;Widget&gt;[
                                            SizedBox(
                                              width: 9.52,
                                            ),
                                            SvgPicture.asset(
                                                'assets/svg/icon_location.svg'),
                                            SizedBox(
                                              width: 9.52,
                                            ),
                                            SvgPicture.asset(
                                              'assets/svg/icon_location.svg',
                                              height: 50,
                                            ),
                                            SizedBox(
                                              width: 9.52,
                                            ),
                                            SvgPicture.asset(
                                                'assets/svg/icon_location.svg'),
                                            SizedBox(
                                              width: 9.52,
                                            ),
                                            /*  Text(
                                      recommendations[index].name,
                                      style: GoogleFonts.lato(
                                          fontWeight: FontWeight.w700,
                                          color: Colors.white,
                                          fontSize: 16.8),
                                    ) */
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.center,
                                  child: Container(
                                    margin: EdgeInsets.all(70),
                                    child: Text(
                                      querySnapshot.docs[index].data()['title'],
                                      style: TextStyle(
                                          fontSize: 27,
                                          color: Colors.white,
                                          fontWeight: FontWeight.bold),
                                      textAlign: TextAlign.left,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
                    )
                  ],
                );
              },
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Firestore:
  <a href="https://i.stack.imgur.com/HoT6Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HoT6Z.png" alt="enter image description here" /></a>
  If you look at the picture you can easily understand what I mean.
  <a href="https://i.stack.imgur.com/pL1tF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pL1tF.png" alt="enter image description here" /></a></p>