Navigate Deep in your app — 2[Flutter tutorial programatically]
Didn’t read previous blog : [Link to part 1]
In the Previous blog, we discussed about the basic concept of Stack, Push Pop Operations and some of the Navigators.
Here We’ll be getting a bit idea About The Routing/Navigating and Transitions between the screens and how actually it works. Again not going to go to core of it, Just basic Routing .
Navigation and routing are some of the core concepts of all mobile application, which allows the user to move between different pages. We know that every mobile application contains several screens for displaying different types of information. For example, an app can have a screen that contains various products. When the user taps on that product, immediately it will display detailed information about that product.
In Flutter, the screens and pages are known as routes, and these routes are just a widget. In Android, a route is similar to an Activity.
CODING SPEAKS LOUDER THAN TALKING, SO LETS MOVE FUTHER>>>>
Step 1: Create three screens
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(InitApp());
class InitApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Screen: screen 1'),
),
body: RaisedButton(
onPressed: () {
},
child: Text("Dashboard"),
),
);
}
}
class DashboardScreen extends StatefulWidget {
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
),
body: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
},
child: Text("Back to login"),
),
RaisedButton(
onPressed: () {
},
child: Text("Order"),
),
],
),
);
}
}
class OrderScreen extends StatefulWidget {
@override
_OrderScreenState createState() => _OrderScreenState();
}
class _OrderScreenState extends State<OrderScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Order'),
),
body: RaisedButton(
onPressed: () {
},
child: Text("Login"),
),
);
}
}We have create three screens Login, Dashboard and Order.
Step 2: Go to next screen
First from Login to Dashboard. For that add following into onPressed of button in LoginScreen.
RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => DashboardScreen(),
));
},
child: Text("Dashboard"),
)Then we will go to OrderScreen from DashboardScreen. For that add following into onPressed of button in DashboardScreen.
RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OrderScreen(),
));
},
child: Text("Order"),
),Explanation:
We accessed object of navigation through inherited widget by Navigator.of(context). On this object we called push method. push method requires a MaterialPageRoute and MaterialPageRoute have a builder method.
So we initiate a MaterialPageRoute with builder in it. This builder requires the next screen object. So we passed it next screens => First DashboardScreen and Second OrderScreen.
Step 3: Go back to previous screen
Update Dashboard Screen’s body like this
body: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("Back to login"),
),
RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OrderScreen(),
));
},
child: Text("Order"),
),
],
),we have added highlighted lines in DashboardScreen. This a button with onPressed function. In onPressed we have added Navigator.pop(context);. This will remove current screen from our Navigation Stack.
Read out Part-1 to understand Navigation Stack.
Now that we know how we can push and pop screen. Let’s see popUntil .
Update your app like this
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(InitApp());
class InitApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Screen: screen 1'),
),
body: RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => DashboardScreen(),
settings: RouteSettings(name: "dashboard")));
},
child: Text("Dashboard"),
),
);
}
}
class DashboardScreen extends StatefulWidget {
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
),
body: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("Back to login"),
),
RaisedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OrderScreen(),
settings: RouteSettings(name: "/order")));
},
child: Text("Order"),
),
],
),
);
}
}
class OrderScreen extends StatefulWidget {
@override
_OrderScreenState createState() => _OrderScreenState();
}
class _OrderScreenState extends State<OrderScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Order'),
),
body: RaisedButton(
onPressed: () {
Navigator.popUntil(context, ModalRoute.withName("/"));
},
child: Text("Login"),
),
);
}
}To perform popUntil we will need name of every added screen in stack. For that we have added settings: RouteSettings(name: “/order”) and settings: RouteSettings(name: “dashboard”). Now that we have names to every route we can go to any previous screen by removing any screen in between
remember First route is always “/”
Let’s move back to very first screen with route ‘ / ’ by using Navigator.popUntil(context, ModalRoute.withName(“/”));
Yeah.. That’s it. We navigated through our screens.
You can find code here https://github.com/viveky259259/flutter_for_people/blob/master/lib/widgets/navigators_example.dart.
(This file may update in future).
What’s the biggest thing you’re struggling with right now that I can help you with? What kinds of content would you like to see more on this blog?
If you enjoyed this post ,let me know in the comments how much useful this blog was to you.If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!
Connect with me on: Github Twitter LinkedIn Instagram Youtube Patreon
#flutter #widgets #crossplatform #tutorial #navigation #screens #push #pop #viveky259 #code
**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.
References:
