Filter by Widgets


How to Navigate to New Page

This Article is posted by seven.srikanth@gmail.com 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
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 create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

How to create a Slider in Flutter?

Check out this article on How to create a Slider in Flutter?

Read full post

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

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.