How to navigate to different pages when the user taps in each item(grids) in Flutter?

Question

here is the code, I'm not able to navigate to other pages when i use this navigator code. only one item is able to navigate to another page when user taps on it. will it change if named route navigation is used? Is there anyway to navigate to various pages when user taps on each item separately. When i try to give the same navigation code again in ontap method it isn't working! Is there any way to rectify this??

class GridDashboard extends StatelessWidget {
  final Items item1 = new Items(
      title: "Call",
      subtitle: "Contacts",
      event: "",
      img: "assets/call.png");

  final Items item2 = new Items(
    title: "Message",
    subtitle: "inbox",
    event: "",
    img: "assets/message.png",
  );
  final Items item3 = new Items(
    title: "Music",
    subtitle: "Listen to fav songs",
    event: "",
    img: "assets/music.png",
  );
  final Items item4 = new Items(
    title: "Navigation",
    subtitle: "select destination",
    event: "",
    img: "assets/navigation.png",
  );
  final Items item5 = new Items(
    title: "News",
    subtitle: "Today's highlights",
    event: "",
    img: "assets/news.png",
  );
  final Items item6 = new Items(
    title: "To Do List",
    subtitle: "",
    event: " ",
    img: "assets/todolist.png",
  );

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [item1, item2, item3, item4, item5, item6];
    var color = 0xff616161;
    return Flexible(
      child: GridView.count(
          childAspectRatio: 1.0,
          padding: EdgeInsets.only(left: 16, right: 16),
          crossAxisCount: 2,
          crossAxisSpacing: 18,
          mainAxisSpacing: 18,
          children: myList.map((data) {
            return GridTile(
              child: InkResponse(
                child: Container(
                  decoration: BoxDecoration(color: Color(color), borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.asset(
                        data.img,
                        width: 42,
                      ),
                      SizedBox(
                        height: 14,
                      ),
                      Text(
                        data.title,
                        style: GoogleFonts.openSans(textStyle: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w600)),
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      Text(
                        data.subtitle,
                        style: GoogleFonts.openSans(textStyle: TextStyle(color: Colors.white38, fontSize: 10, fontWeight: FontWeight.w600)),
                      ),
                      SizedBox(
                        height: 14,
                      ),
                      Text(
                        data.event,
                        style: GoogleFonts.openSans(textStyle: TextStyle(color: Colors.white70, fontSize: 11, fontWeight: FontWeight.w600)),
                      ),
                    ],
                  ),
                ),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (item1) => CallApp()),


                  );
                },
              ),
            );
          }).toList()),
    );
  }
}
'''

how to navigate separately to new pages separately when user taps on each item.?
 i tried normal navigation method but I'm not able to access other than one item with this code.
Is there anyway to navigate to various pages when user taps on each item separately.

Answer 1

You can do it both way, either named or normal(PageRoute) navigation. Actual problem is in your code structure. Here, I would suggest you to add a widget variable that tells where the user should navigate in your Items model. For example,

class Items{
  final String title;
  final String subtitle;
  final String event;
  final String img;
  final Widget navigateTo;

  Items({this.title, this.subtitle, this.event, this.img, this.navigateTo});
}

Now, your model accepts navigateTo as a widget. We can use this parameter to decide where to navigate. So, your final code becomes,

class GridDashboard extends StatelessWidget {
  final Items item1 = new Items(
      title: "Call",
      subtitle: "Contacts",
      event: "",
      img: "assets/call.png",
      navigateTo: Call()
      );

  final Items item2 = new Items(
    title: "Message",
    subtitle: "inbox",
    event: "",
    img: "assets/message.png",
    navigateTo: Message()
  );
  final Items item3 = new Items(
    title: "Music",
    subtitle: "Listen to fav songs",
    event: "",
    img: "assets/music.png",
    navigateTo: Music()
  );
  final Items item4 = new Items(
    title: "Navigation",
    subtitle: "select destination",
    event: "",
    img: "assets/navigation.png",
    navigateTo: Navigation()
  );
  final Items item5 = new Items(
    title: "News",
    subtitle: "Today's highlights",
    event: "",
    img: "assets/news.png",
    navigateTo: News()
  );
  final Items item6 = new Items(
    title: "To Do List",
    subtitle: "",
    event: " ",
    img: "assets/todolist.png",
    navigateTo: Todo()
  );

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [item1, item2, item3, item4, item5, item6];
    var color = 0xff616161;
    return Flexible(
      child: GridView.count(
          childAspectRatio: 1.0,
          padding: EdgeInsets.only(left: 16, right: 16),
          crossAxisCount: 2,
          crossAxisSpacing: 18,
          mainAxisSpacing: 18,
          children: myList.map((data) {
            return GridTile(
              child: InkResponse(
                child: Container(
                  decoration: BoxDecoration(color: Color(color), borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.asset(
                        data.img,
                        width: 42,
                      ),
                      SizedBox(
                        height: 14,
                      ),
                      Text(
                        data.title,
                        style: GoogleFonts.openSans(textStyle: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w600)),
                      ),
                      SizedBox(
                        height: 8,
                      ),
                      Text(
                        data.subtitle,
                        style: GoogleFonts.openSans(textStyle: TextStyle(color: Colors.white38, fontSize: 10, fontWeight: FontWeight.w600)),
                      ),
                      SizedBox(
                        height: 14,
                      ),
                      Text(
                        data.event,
                        style: GoogleFonts.openSans(textStyle: TextStyle(color: Colors.white70, fontSize: 11, fontWeight: FontWeight.w600)),
                      ),
                    ],
                  ),
                ),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => data.navigateTo));
                  }

                  );
                },
              ),
            );
          }).toList()),
    );
  }
}