Introduction to the fluto routing framework


In the process of application development of flutter, in addition to the routes officially provided by flutter, some third-party routing frameworks can be used to realize page management and navigation, such as fluro, froter, etc.

As an excellent enterprise level routing framework, fluro is more complex than the official routing framework, but it is very suitable for medium and large-scale projects. Because it has the advantages of clear hierarchy, organization, convenient expansion and convenient overall management of routing.

Before using fluro, you need to add a fluro dependency to the pubspec.yaml file, as shown below.

 fluro: "^1.5.1"

If you cannot use the above method to add a fluro dependency, you can also use git to add a fluro dependency, as shown below.

  git: git://

After adding the dependency of fluro library successfully, we can use fluro to develop the application’s route management and navigation. In order to facilitate the unified management of routes, it is necessary to create a new route mapping file to manage each route. As shown below, is the example code of the route configuration file route_handles.dart.

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/page_a.dart';
import 'package:flutter_demo/page_b.dart';
import 'package:flutter_demo/page_empty.dart';

// empty pages
var emptyHandler = new Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params) {
   return PageEmpty();

//A page
var aHandler = new Handler(
  handlerFunc: (BuildContext context, Map<String, List<Object>> params) {
   return PageA();

//B page
var bHandler = new Handler(
  handlerFunc: (BuildContext context, Map<String, List<Object>> params) {
   return PageB();

After completing the basic routing configuration, we need a static overall routing configuration file, which is convenient for us to use in the routing page. As shown below, is an example code for the routing overall configuration file routes.dart.

import 'package:fluro/fluro.dart';
import 'package:flutter_demo/route_handles.dart';

class Routes {
 Static string page_a = "/"; // Note
 static String page_b = "/b";

 static void configureRoutes(Router router) {
  router.define(page_a, handler: aHandler);
  router.define(page_b, handler: bHandler);
  Router. Notfoundhandler = emptyhandler; // empty page

In the overall configuration of routing, you also need to deal with the non-existent path situation, that is, use the empty page or the default page instead. At the same time, it should be noted that the home page of the application must be configured with “/”.
For the convenience of use, the router needs to be static so that it can be called directly on any page. As shown below, is the sample code for the application. Dart file.

import 'package:fluro/fluro.dart';

class Application{
 static Router router;

After the above operations are completed, you can import the routing configuration file and the static file into the main.dart file, as shown below.

import 'package:fluro/fluro.dart';
import 'package:flutter_demo/routes.dart';

import 'application.dart';

void main() {
 Router router = Router();
 Application.router = router;


class MyApp extends StatelessWidget {
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'Demo App',
   onGenerateRoute: Application.router.generator,

If you want to jump to a page, just use the application. Router. Navigateto() method, as shown below.

Application.router.navigateto (context, "/ b"); // B is the configuration route

Run the above example code, the effect is shown in the following figure.

It can be found that although the use of fluro is more cumbersome than that of the navigator of flutter, it is very suitable for medium and large-scale projects. Its layered architecture is also very convenient for the later upgrade and maintenance of the project. When using it, you can make a reasonable choice according to the actual situation.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.