Welcome guys,
In this post, I'm going to show you how to navigate to a new page using Flutter.
Here is how your sample app is going to look like.
![](https://www.fluttercentral.com/Uploads/a79558a9-e123-41f6-871c-38cf6bfff7bc.gifwidth="50%height="autofont-size: 1rem;](
Below is the complete code from main.dart file. font-size: 1rem;](Note: You can simply copy the below code into you main.dart and run the code and you will get the required output.
runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State {
void _opennewpage() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(
'This is your second page',
),
],
),
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(
'Example to Navigate to Next Page',
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _opennewpage,
tooltip: 'Open New Page',
child: new Icon(Icons.navigate_next),
),
);
}
}
`
Explanation: font-size: 1rem;](Initially I have created the Default App and then I have modified the code to call the function "_opennewpageon the button click.
The button code already existing in the default app and you just have to modify the onPressed event. If you want a more appropriate icon for this example, then you can just change it to navigate_next and the icon code is available in floatingActionButton.
So after this I have implemented the function "_opennewpagefunction to open a new page as below.
(
builder: (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Text(
'This is your second page',
),
],
),
),
);
},
),
);
}
`
And then the new page opens on the button click.
This is a simple example of how you can implement multiple pages in Flutter. Hope this is useful.
Thanks,
Srikanth