How to Navigate to New Page

<p>Welcome guys,</p> <p>In this post, I'm going to show you how to navigate to a new page using Flutter.</p> <p>Here is how your sample app is going to look like.</p> <p>![](<a href="https://www.fluttercentral.com/Uploads/a79558a9-e123-41f6-871c-38cf6bfff7bc.gifwidth=%2250%height=%22autofont-size">https://www.fluttercentral.com/Uploads/a79558a9-e123-41f6-871c-38cf6bfff7bc.gifwidth="50%height="autofont-size</a>: 1rem;](</p> <p>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.</p> <p>runApp(new MyApp());</p> <p>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'), ); } }</p> <p>class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);</p> <p>final String title;</p> <p>@override _MyHomePageState createState() => new _MyHomePageState(); }</p> <p>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', ), ], ), ), ); }, ), ); }</p> <p>@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), ), ); } }</p> <p></p> <p>Explanation: font-size: 1rem;](Initially I have created the Default App and then I have modified the code to call the function &quot;_opennewpageon the button click.</p> <p>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.</p> <p>So after this I have implemented the function &quot;_opennewpagefunction to open a new page as below.</p> <p>( 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', ), ], ), ), ); }, ), ); }</p> <p></p> <p>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.</p> <p>Thanks, Srikanth</p>