I am also an old user after the company developed an app with Flutter. The practice lasted for half a year. In the company’s recent reconstruction, Fluro was used to manage the route, let’s have a simple experience together.

1. Add the page_router.dart file

Write the following code in this file

A PageRouter class where we define a static Router instance provided by Fluro and then a static method setupRoutes to set our routes

2. Increase page_routes. Dart

Here I define a map collection where the key is the path of the page and the value is an instance of a Handler as required by Fluro

/home is the path of the page. The :userId is a placeholder for the url of the page. NavigateTo (context, “/home/1234”, transition: transitionType.fadein); The params[“userId”] parameter is a map, and the key is the name of the placeholder parameter. However, params[“userId”] is a List, and does not fetch the value directly. And this is actually the first value in the List, so we’re going to pull it out with.first

3. Register routes

We have defined routes above, but they have nothing to do with Fluro. Next, we will associate them

Dart file and we add code to setupRoutes. We import page_routes.dart file first

In setupRoutes we walk through the map and call router.define() to register the route to the Fluro router. We’ve done most of the work here, and just to emphasize, I did a search of the articles before I started fluro, and they were doing manual routing registration, which is code like this

router.define(xx, handler: xxHandler);
router.define(xx, handler: xxHandler);
Copy the code

As a programmer can automatically do not manual, right, such a repeated code directly loop done on the line, or maybe others are to demonstrate simple writing it.

4. Set the Router to the MaterialApp

  • Dart starts by executing the following code inside the main() method at the entrance to main.dart
  PageRouter.setupRoutes();
Copy the code

Call setupRoutes method of PageRouter to register routes

  • With MaterialApp binding
 MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
primarySwatch: Colors.blue,
 ),
 onGenerateRoute: PageRouter.router.generator,
) 

Copy the code

5. Improve

Let’s review the way we wrote the routes in step 2. I think it still looks not elegant enough

  • When there are too many page names, the added page path is easy to be the same as the above. Moreover, the placeholder of the parameter passed on the page looks strange. Two or three parameters add a long pile of path.
  • Page-passing parameters are very wordy, I think the design of params is not good, it is a map and the type is lost when we value it, we don’t know exactly what type to get at a glance, although params is a List, we can know that it is a String, but I can’t directly see the type from the naked eye. Especially when it comes to changing the code. The type is missing because fluro is dead inside and all I get out of Params is a String, but it makes sense that the url is usually a String, but for example, when I pass an ID to ClassDetailPage, because I defined it as an int, Params [“id”][0] gets String, and I need to do a type conversion,
  • The code as a whole looks redundant and cumbersome to write

To use fluro to transfer value, you need to write it in advance where you define routes, which I think is not in accordance with the habit. My habit is that WHEN I jump to the page, I will combine array to pass the value, now I not only need to assign value when I define routes. You have to combine data and transfer values as you jump from page to page. Now, if you’re an Android programmer, would you think of something called a Bundle that you use to transfer between activities? Yeah, let’s get it over here

We use this for several benefits

  • It’s obvious at first glance what type of value you’re trying to get from the map, what type of value are you putting in
  • Instead of taking parameters from Params one by one when using Fluro, we packaged the data to be passed between pages in a Bundle object.
  • If you accidentally write the key wrong, I’ll throw an exception so you don’t have to wait until it’s null,

Let’s see how it works

This way, I will no longer complain that I don’t know what type you write, I wrote the wrong type, IDE can also prompt

Next we’ll modify Fluro to add a class to the page pass parameters

A class called PageBuilder, getHandler eventually returns the handler that Fluro needs,

Let’s transform the page_routes.dart file

See if it’s a little fresher than before,

  • The map key is no longer a string. We define an enumeration, PageName. We know that enumeration values cannot be repeated
  • So let’s look at the value of the map, if it’s clean, without all the stuff that we had before, let’s look at the value of the map

Now it looks like shit

After optimization, we only need to add a PageName to the enumeration PageName, and then add a key and value to the map

PageBuilder(builder: (bundle) => LoginPage())
Copy the code

So this bundle here is what you do when you transfer the bundle between pages, and you put the values in this bundle object, and then manually upload them to the page parameters like this PageBuilder. (bundle) => HomePage(bundle) in HomePage I declare the final bundle bundle;

Let’s see how do we pass values

The second argument to flutter is String, so we toString the value of this enumeration. You can see that we get the PageName directly from PageName. Instead of typing the string itself, which is easy to type incorrectly, this argument will put our bundle object and use this argument to transfer the bundle to the next page

The last

Here thanks to the author of Fluro’s contribution, you have any ideas can comment on the message oh, I wish you a happy Mid-Autumn Festival!