Working with routes in Flutter by using Fluro
I will give some examples for routes in Flutter. Flutter has a routing and navigation features in core module but i want to use Fluro package for this because this package is simple for defining and navigating on routes. I mentioned some information about Flutter in my previous post. This post has some topics because i will start a project by zero.
The topics
- Creating a Flutter project
- Adding a package in your Flutter project
- Using a package in your Flutter project
- Defining routes in your Flutter project
- Navigating routes in your Flutter project
Let’s start by creating a Flutter project. You need to install Flutter SDK for this. If you do not have Flutter, you can install by using get started document. Flutter has a tool which is running in terminal and we can create project or run project by using this tool. The another option, you can create project by using Flutter plugin in IntelliJ IDEA or Android Studio. I will use the Flutter command for creating a project.
Open your terminal and go to where you want to create project then run this command. You can give a your name for project. I used “app”.
If completed this command, you can start. Now, we have a Flutter project. We can run this project for see. You can run the project by using “flutter run” command but i do not run project now. I want to clean starter project codes and add a package to my project. So, first open your app folder by using a IDE. You will show a file which name is “pubspec.yaml”. Open your “pubspec.yaml” file. We will use Fluro package in our project, so we need to add this package to our project. This file has dependencies of our project for Flutter and we add Fluro package with this file. Let’s add Fluro package line after your dependencies line. You should have this content.
Yes, we added Fluro package our project dependencies but we did not installed this package now. We need to install this package to use. We can install this package by using Flutter command. Open your terminal and go to your project path. Then, run this command for getting your dependencies.
And you should take this ouput after this command.
Yes, we have ready to use this package now. We can start coding. So, let’s open our main.dart file and clean up this file. Remove the sample codes in this because we will create our classes and pages then use in our main file. But first, we need pages. So, in this example. I want to create 3 page for testing navigation. My pages will be SplashPage, HomePage and AboutPage. I want to go back HomePage or SplashPage from AboutPage but I do not want to go back HomePage from SplashPage or I do not want to go back SplashPage from HomePage. So, I need to define classes for these pages. I will create a folder which name is “pages” in “lib” folder of project. Then, I will create 3 files in this folder. They are home.page.dart, about.page.dart, splash.page.dart files.
Now, we have pages now so we can define our routes. I want to define routes in main.dart file for managing my routes in a single file. Ok but how can i define? The Fluro package has simple Router class for it. This class has “define” method for defining routes. But our Flutter does not know Fluro routes. So first of all, i need to say to Flutter, “Hey my routes coming from Fluro”. I can do this in creating my app class. If you look the MaterialApp class, we have a property which name is “onGenerateRoute” so this property can handle Fluro routes if you want. I will these features in main.dart file.
Let’s give it a shot.
Source: https://github.com/anilcancakir/flutter-rotues-example-fluro
