Search code examples
flutterflutter-layoutflutter-navigationflutter-listviewflutter-routes

different page Navigation in ListView.builder in flutter?


onTap: () {
  Navigator.push(
      context, MaterialPageRoute(builder: (context) => Animals()));
},

I am trying to add different page routing Navigation in Inkwell insider I tried some different ways But it doesn't work

My List View name

List title = [
   'Animals',
   'Birds',
   'Body Parts',
   'Country',
   'Fish',
   'Plants',
   'Vehicle',
   'Works',
];

I want this to navigate to List route = [Animals(),Birds(),BodyParts(),Country(),Fish(),Plant(),Vehicle(),Works(),];


Solution

  • you can do :

    List pages = [['Animals',Animals()],['Birds',Birds()],['Body Parts',BodyParts()], 
                 ['Country',Country()],['Fish',Fish()],['Vehicle',Vehicle()], 
                 ['Plants',Plants()],['Works',Works()]];
    

    now :

    ListView.builder(
          itemCount: pages.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              child: ListTile(title:Text(pages[index][0])),
              onTap: () {
               Navigator.push(context,MaterialpageRoute(builder:(context)=>pages[index][1])));
              },
              
            );
          },
        )