How do u navigate to different pages using cards built using GridView.builder(). U could navigate only to a common page right?

Viewed 149

i.e Each card displayed should either navigate to a different page or should render data according to the api fetched.

1 Answers

Call a funtion based on index of gidview for example:

   class Grid4 extends StatelessWidget {
   void tapped(int index){
   if(index == 1){
     //navigate to one 
     } else {
    // navigate to two 
     }
   }
    @override
    Widget build(BuildContext context) {
     return Scaffold(
     appBar: AppBar(),
     body: Container(
       padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
       color: Colors.orange,
       child: GridView.builder(
         itemCount: 25,
         itemBuilder: (context, index) =>
             GestureDetector(
                 onTap: () => tapped(index),
                 child: Container(decoration: BoxDecoration(
                         color: Colors.white70, shape: BoxShape.circle))),
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
           crossAxisCount: 5,
           mainAxisSpacing: 40,
           crossAxisSpacing: 50,
         ),
       ),
      ),
    );
  }
   }
Related