Is there a method to switch from one page to another? - flutter

Question

I'm developing an application using flutter, I got to display the first page and I created sub pages.
My problem is that I don't know how to display a second page when you click on an item. example: I created a grid of 8 boxes and each box must display a unique page at the click. i.e. item 1 returns page 1, item 2 returns page 2, item 3 returns page 3... etc.
here is a capture of the first page

Answer 1

You can achieve this with the following code example. With the Navigator you can go to the next page and display it.
class NavigatorPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => nextPage(context, index),
child: Card(
...
),
);
},
),
),
);
}
void nextPage(BuildContext context, int index) {
if (index == 0) {
Navigator.push(context, MaterialPageRoute(builder: (context) => Page1()));
} else if (index == 1) {
Navigator.push(context, MaterialPageRoute(builder: (context) => Page2()));
}
...
}
}

Answer 2

what you need is the Navigator object. In flutter it's used to navigate the user between screens by having one initial screen and then stacking more on top of it. This is a good tutorial on the basics.
In general good practise is to use named routes (tutorial here) but you don't need to use named routes to use the Navigator. In your example you can put the following in a onPressed argument on each item:
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return PageTwo()
);
},
);

Answer 3

On first Screen, write this code.
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return SecondScreen()
);
},
);
You must import the Second Screen in First Screen dart file.