Navigation in Flutter and GetX Navigation
Most of the apps will have multiple screens displaying various information to the users. For example, an app might display the list of emails you received. When the user taps on any of the email, a new screen displays email body and other features.
As per the Flutter documentation the screen & pages are called as routes.
In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.
To know more about the Navigator class you can read the full documentation here.
In our first example we are going to see how to use the navigator class for navigating to a new screen.
Example 1: Full code
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: FirstRoute(),
);
}
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('XAM First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
// Navigate to second route when tapped.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("XAM Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {\
// Navigate back to first route when tapped.
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
Whenever the app loads our first screen would be FirstRoute()
home: FirstRoute(),
In the first page we have a button named “Open route”
RaisedButton(
child: Text('Open route'),
onPressed: () {
// Navigate to second route when tapped.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
)
When the pressed is pressed we initiate the process for navigation.
Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()), );
Here we inform the app to navigate to SecondRoute();
And again, in Second route we have a button and when pressed, we are closing the recently opened screen.
RaisedButton(
onPressed: () {
// Navigate back to first route when tapped.
Navigator.pop(context); }, child: Text('Go back!'), )
The demo:
With this approach, for a production class app, there will be a lot of duplicate code and will become hard to manage. To overcome this we have the next approach
Navigator.pushNamed() Reset the onclick code that we introduced. Next step is to define the routes as shown below
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
initialRoute: '/',
routes: {
'/': (context)=>FirstRoute(),
'/second': (context)=> SecondRoute()
},
home: FirstRoute(),
);
We have defined that the initial path is ‘/’ and the the page is FirstRoute()
Since we have already defined the first route, we can now safely removed the following line
home: FirstRoute(),
When the button is pressed change the existing code as follows:
onPressed: () {
// Navigate to the second screen when tapped.
Navigator.pushNamed(context, '/second');
},
Likewise in the second screen,
onPressed: () {
// Navigate back to the first screen when tapped.
Navigator.pushNamed(context, '/');
},
Now execute the code and you should see the app works the same way in both approaches.
Is that all? No, this code is already available in the Flutter Cookbook and I have done nothing new.
In this blog we are going to deep dive into GetX library navigation. GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.
First, let’s open our pubspec.yaml and install getx to our project.
Add this to your package’s pubspec.yaml file:
dependencies: get: ^3.12.1
You can install packages from the command line:
$ flutter pub get
Now let’s see how simple is to navigate using GetX.
The first change is, instead of MaterialApp change it to GetMAterialApp() as shown below
GetMaterialApp( theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: FirstRoute(), ); }
And in first screen onPressed, commet the previous code and add
Get.to(SecondRoute());
onPressed: () {
// Navigate to second route when tapped.
/*Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),*/
Get.to(SecondRoute());
}
Now execute the code. There will be no difference in the navigation.
Alright, what else we can do with Getx navigation?
1. Remove the stack history:
Let’s say that you’re in third screen and wish to back to first screen with no stack history. Use the below code
RaisedButton(
onPressed: () {
// Navigate back to first route and remove the history
Get.offAll(FirstRoute());
},
child: Text('Go to First!'),
),
If you want to remove the SecondRoute() alone from the history then
RaisedButton( onPressed: () { // Navigate back to first route and remove this page from the history Get.off(FirstRoute()); }, child: Text('Go to First!'), ),
You can also show a SnakBar in no time.
RaisedButton( child: Text('Show SnackBar'), onPressed: () { Get.snackbar("Hello", "I'm Nag from XAM",snackPosition: SnackPosition.BOTTOM); }, ),
You can modify this is any design as per your requirement
onPressed: () {
Get.snackbar("Hello", "I'm Nag from XAM",
snackPosition: SnackPosition.BOTTOM,
backgroundColor: Colors.black,
colorText: Colors.white,);
},
Next you can show a dialog box with the following code:
RaisedButton(
child: Text('Show DialogBox'),
onPressed: () {
Get.defaultDialog(
title: "XAM",
content: Text("One of the best places to work"),);
},
),
You can also show a bottom sheet in less than a minute.
RaisedButton(
child: Text('Show BottomSheet'),
onPressed: () {
Get.bottomSheet(Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("I'm Nagaraj Alagusundaram and you can call me Nag",style: TextStyle(fontStyle: FontStyle.italic, fontSize: 22),),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Working at XAM, Sydney",style: TextStyle(fontSize: 30),),
)
],
),
),
),
));
},
),
Download the code at GitHub
-Nagaraj Alagusundaram