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

Issue

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

Solution

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,
      ),
    ),
   ),
 );

}
}

Answered By – Vishal_VE

Answer Checked By – Willingham (FlutterFixes Volunteer)