How to Navigate to New Page

This Article is posted by seven.srikanth at 26-07-2018 02:45:55

Welcome guys,
In this post I'm going to show you how to navigate to new page using Flutter.
Here is the final output and code from main.dart. Explanation below.
Note: You can simply copy the below code into you main.dart and run the code and you will get the required output.
 
import 'package:flutter/material.dart';
void main() => 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<MyHomePage> {
void _opennewpage() {
Navigator.of(context).push(
new MaterialPageRoute<void>(
builder: (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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: <Widget>[
new Text(
'Example to Navigate to Next Page',
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _opennewpage,
tooltip: 'Open New Page',
child: new Icon(Icons.navigate_next),
),
);
}
}
Explanation:
Initially I have created the Default App and then I have modified the code to call the function "_opennewpage" on 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 "_opennewpage" function to open a new page as below.
void _opennewpage() {
Navigator.of(context).push(
new MaterialPageRoute<void>(
builder: (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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

Tags: Navigate to new page;



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.



Recent Articles


How to deploy flutter web site on GitHub using peanut

Posted by nikhilchaudhary12155 on 13 Oct 2019 Article


AnimatedPositioned Widget Example in Flutter

Posted by seven.srikanth on 10 Oct 2019 Article


Flutter Open-Source and directory lists

Posted by nishantkotatech on 09 Oct 2019 Article


Flutter Travelling Couple Leading Page - Flutter Web Series 3

Posted by nikhilchaudhary12155 on 05 Oct 2019 Article



© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com