Flutter routing fluro introduction configuration and use of specific methods

Introduction to Directory flutter_fluro Introducing fluro Initialize Fluro Write rotuer_handler Configure routing Static Router of Fluro Register/inject routes to the top level Use on the home page Summary:

Flutter itself provides a routing mechanism for small personal projects, which is completely sufficient. But if you want to do enterprise development, you may become bloated in the entry file. When Flutter came out, fluro, an enterprise-level routing scheme, was already available.

Introduction to flutter_fluro

fluro simplifies the routing development of Flutter, and is also the most mature routing framework in Flutter ecosystem at present.

GitHub Address: https://github.com/theyakka/fluro

It appeared earlier ah, is the most users of Flutter routing solutions, Github on the current nearly 1000Star, can be said to be quite remarkable.

Introducing fluro

In the pubspec. yaml file, register version dependencies directly, as follows. (Pay attention to the latest edition)

dependencies:
 fluro: "^1.5.1"

If you can't download this version, you can also use git to register dependencies, so that the page can download packages (this is also a question raised by small partners). The code is as follows:

dependencies:
 fluro:
   git: git://github.com/theyakka/fluro.git

Introduced in the entry file of the project, namely main. dart, with the following code:

import 'package:fluro/fluro.dart';

Through the above 3 steps, even if Fluro is introduced into the project, the following can be used happily.

Initialize Fluro

Now you can use it. When you use it, you need to initialize it in the Build method, which is actually to put the object new out.

final router = Router();

Write rotuer_handler

handler is equivalent to a routing rule. For example, if we want to go to the detailed page, we need to pass the ID of the commodity, so we need to write an handler. This time, I deployed the project directory and files according to the real project development of large enterprise level, and all the routes were separated. Handler was written as a file separately. Create a new routers folder, and then create a new router_handler. dart file

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import '../pages/details_page.dart';


Handler detailsHanderl =Handler(
  handlerFunc: (BuildContext context,Map<String,List<String>> params){
    String goodsId = params['id'].first;
    print('index>details goodsID is ${goodsId}');
    return DetailsPage(goodsId);

  }
);

In this way, an Handler is finished. The writing of Hanlder is the most important environment in routing, and there are many knowledge points. Here we only learn the simplest writing of Handler. In the future, with the increase of courses, we will continue to explain the writing method of Handler in depth.

Hanlder is only a separate configuration file for each route, and fluro certainly needs an overall configuration file. After configuration, we also need a static file, which is convenient for us to use on UI page.

Configure routing

We also need to have an overall configuration of the route, such as following the directory, and how to display the non-existing path. In our work, we often write this file as a separate file. In routes. dart, create a new routes. dart file.

The code is as follows:

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import './router_handler.dart';

class Routes { // Configuration class 
  static String root = '/'; // Root directory 
  static String detailsPage = '/detail'; // Details page 
  // Static method 
  static void configureRoutes(Router router){// Routing configuration 
    // No route found 
    router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print('ERROR====>ROUTE WAS NOT FONUND!!!');
      }
    );
    // Overall configuration 
    router.define(detailsPage, handler: detailsHandler); 
  
  }
}

Static Router of Fluro

This step is for the convenience of use, directly static Router, so that it can be called directly on any one page, instead of calling New.

A new application. dart file was created under routers. The code is as follows:

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

Static Router, so that we can use Application. Router directly when using it.

Now we have basically configured the route of Fluro. Although this configuration is slightly complicated, it is hierarchical and organized, and has strong scalability.

Register/inject routes to the top level

Open the main. dart file, and introduce configuration files and static files on the front page, routes. dart and application. dart, with the following code:

import './routers/routes.dart';
import './routers/application.dart';

After the introduction, it is necessary to assign values and inject programs. The main build code is shown here.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //------------------- Main code start
    final router = Router(); // Route initialization 
    Routes.configureRoutes(router);
    Application.router = router;
    //------------------- Main code end
    
    return Container(
      child: MaterialApp(
        title:' People's life +',
        debugShowCheckedModeBanner: false,
        //---------------- Main code start
        onGenerateRoute: Application.router.generator, // Routing statics 
        //---------------- Main code end
        theme: ThemeData(
          primaryColor:Colors.pink,
        ),
        home:IndexPage()
      ),
    );
  }
}

The above code is injected into the entire program, so that we can use it by directly introducing application. dart into any page.

Use on the home page

Now you want to use routing on the home page, and open the product details page directly on the home page.

Introduce the application. dart file first:

import './routers/application.dart';

Then use the configured route in the list of hot zones to open the product detail page details_page. dart.

Open the home_page. dart file, find the ontap event in the hot zone list, and then jump directly using application in the ontap event. The code is as follows:

dependencies:
 fluro:
   git: git://github.com/theyakka/fluro.git

0

At this time, you can test 1. If 1 is normal, you should be able to open the product details page.

Summary:

Write a separate Handler file, each Handler is written in it, each route is defined separately, and then jump pages are done in Handler. If there are 10 pages, 10 pages of Handler are finished, to routes. dart file to carry out the overall configuration of define, then static, and then in the main main. dart file injection, and finally can be used.

The router file and the Handler file are configured for each route added.