Flutter Navigation part 1
When you are building a mobile application, mostly you will create more than one page. Then you need to handle navigation from page one to the other pages.
At this time I will show you how to navigate to another page in a simple way but, if you want to know how to manage it globally you can jump to my article here.
Setup
You can download the starter project from this link. Or you can create a new project and follow this structure of files.
In the main.dart file we use the MaterialApp
widget. This widget accepts a parameter named home
and we call HomePage()
so when the application first runs will show the home page as default.
Now we will create new files with the names profile_page.dart and setting_page.dart to practice how navigation works. So the structure of files should be like this.
Then we finished with all files we need.
List of Routes
To handle navigation we will modify the main.dart file. We add another parameter to the MaterialApp
widget named onGenerateRoute
. This parameter is used to declare every page we have and what widget will show when we navigate to it by its name.
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/profile':
return MaterialPageRoute(builder: (_) => ProfilePage());
case '/setting':
return MaterialPageRoute(builder: (_) => SettingPage());
default:
return MaterialPageRoute(builder: (_) => Scaffold());
}
},
The full code for the main.dart file will be like this.
Next, modify home_page.dart to add 2 simple buttons that will navigate to each page we want like this.
You can use Navigator.pushNamed(context,'/profile');
to navigate the page from the home page to the profile page. You can move your cursor into that method and it will show the description and parameter we can pass into it. That Navigator.pushNamed
function will accept BuildContext context
and String routeName
and optional parameter Object? arguments
.
If you face any problems getting here, you can download the project from this link. You can run the application and the result will be like this.
Alternative way
What happens if we have so many pages? With the above approaches, we need to declare all possible routes in the main.dart file and it will make the file too long.
Is there a way to make it more simple? Yeah, actually we can push a new page directly when we click the button.
First, we revert changes by deleting onGenerateRoute
from the main.dart file and it will look like this.
Then we change the function we call when we click the button from Navigator.pushNamed
into the Navigator.push
function.
We can see in the Navigator.push
function will accept BuildContext context
and Route<T> route
as parameters, so we can pass directly the route with MaterialPageRoute
.
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const ProfilePage()),
);
For the final code, you can download it from this link. You can run the application again and the result will be the same.
Hopefully, this article can help you. If you want to know how to handle navigation globally and why you need that, you can read this article.
If you like what you read, please give me your clap 👏. Thanks for your support!