How do u navigate to different pages using cards built using GridView.builder(). U could navigate on-CodePudding

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

CodePudding user response：

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

} }

CodePudding user response：

you could either use onTap for a card to navigate to a complete new screen and change the screen based on something other happening, or change only the data inside the card by rebuilding it with other data or using a stack view, therefore I would use the TernaryOperator. If you have a card widget that navigates to another screen based on when it is created, you can pass the Navigator through the Constructor. To use multiple, different widgets later in the GridView you can also first generate a List of type.