Without navigation, the flutter app does not feel like a real app. Navigation in Flutter is a must for better interaction with the user with User Interface. In this tutorial, you will learn various examples of flutter navigation and routes.
In flutter, the navigation is done by the Navigator Class. It allows you to navigate to the different screens using different ways. You can perform simple navigation or you can navigate with the named routes. You will know each of them.
Examples of Fluter Navigation using Routes
Example 1: Simple Navigation to Different Screen
If you are building simple apps and have fewer screens then you can use simple Navigation in a flutter. You have to just implement two things.
- Navigator.push()
- Navigator.pop()
The Navigator.push() accepts two arguments. One is the current screen or context and the second is MaterialPageRoute(). Inside the MaterialPageRoute there will be a builder function that allows you to navigate from the current screen to the destination screen.
Now when you reached the destination screen and want to get back to the previous screen. You can do this by clicking on the back arrow on the app bar. But in case you are not using the app bar then you can do manually making a button and then use the Navigator.pop(context).
Below is the complete code for implementing the Simple Navigation.
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_navigation/home.dart';
import 'package:flutter_navigation/second_screen.dart';
void main () {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "My Navgation app",
home: Home(),
);
}
}home.dart
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Screen"),
),
body: Center(
child: ElevatedButton(
child: Text("Second Screen"),
onPressed: () {
Navigator.push(context , MaterialPageRoute (
builder : (c) => SecondScreen(),
));
},
)
),
);
}
}second_screen.dart
import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
const SecondScreen({Key key}) : super(key: key);
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: ElevatedButton(
child: Text("Go to Home Screen"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}Output
Example 2: Flutter Navigation using routes
The other method to Navigate between screens is using Navigator with routes. Here you will first define all the routes inside the MaterialApp widget. After that, you will use that routes for navigation. The navigation between screens can be done by using the Navigator.pushNamed(context, “your_routes”) method.
Inside the method, you have to only give the current context and name of the routes. At last, you have to use Navigator.push(context) inside the destination screen shows that you can get back to the original screen.
Below is the complete code for Flutter Navigation using routes
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_navigation/home.dart';
import 'package:flutter_navigation/second_screen.dart';
void main () {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "My Navgation app",
initialRoute: "/",
routes: {
"/": (context) => Home(),
"/second": (context) => SecondScreen(),
},
);
}
}In the above code, you can see I have defined Home Screen and SecondScreen routes. The routes are just like key-value pairs. You can also define initialRoute as it allows you to get the screen when you start the app the first time. Please note that when you are using flutter navigation with routes and defined initialRoute then you shall not use the home argument as it leads to app crash.
home.dart
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Screen"),
),
body: Center(
child: ElevatedButton(
child: Text("Second Screen"),
onPressed: () {
Navigator.pushNamed(context, "/second");
},
),
),
);
}
}second_screen.dart
import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
const SecondScreen({Key key}) : super(key: key);
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: ElevatedButton(
child: Text("Go to Home Screen"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}Output
Conclusion
Flutter Navigation make any mobile app a Real App. You can also pass the results and retrieve the results from the screen using the Navigator widget. We will cover it here soon. These are the examples of Flutter navigation that must be helpful in clearing all the doubts on Navigation. I hope you have liked this tutorial. Even if you have any doubt then you can contact us for help.
