Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of the introduction, configuration and use of Flutter routing fluro. It is very detailed and has a certain reference value. Interested friends must read it!

Introduction to flutter_fluro

Fluro simplifies the routing development of Flutter and is the most mature routing framework in Flutter ecology.

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

It appeared relatively early, ah, is currently the most user-friendly Flutter routing solution, currently there are nearly 1000Star on Github, which can be said to be quite remarkable.

Introduction of fluro

In the pubspec.yaml file, directly register the version dependency, the code is as follows. (pay attention to the latest version)

Dependencies: fluro: "^ 1.5.1"

If you can't download this version, you can also register the dependency using git, so that the page can download the package (this is also a question raised by your partner). The code is as follows:

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

Introduce it into the entry file of the project, namely main.dart, with the following code:

Import 'package:fluro/fluro.dart'

With the above three steps, even if you introduce Fluro into the project, you can happily use it below.

Initialize Fluro

Now you can use it, and you need to initialize it in the Build method first, which is to new the object.

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 product, then we need to write a handler. This time I deploy the project directories and files according to the large enterprise real project development, all the routes are separated, and the Handler is written into a separate file. Create a new routers folder, 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 params) {String goodsId = params ['id'] .first; print (' index > details goodsID is ${goodsId}'); return DetailsPage (goodsId);})

Such a Handler is finished. The compilation of Hanlder is the most important environment in routing, and there are many knowledge points. Here we only learn the simplest Handler writing. Later, with the increase of the course, we will continue to explain the writing method of Handler in depth.

Hanlder is just a separate profile for each route, and of course fluro also needs an overall profile. Once configured, we also need a static file that is convenient for us to use on the UI page.

Configure routin

We also need to have an overall configuration for routing, such as with directories, how to display paths that do not exist, and we often write this file into a separate file in our work. 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) {/ / Route configuration / / Route not found router.notFoundHandler = new Handler (handlerFunc: (BuildContext context,Map params) {print ('ERROR==== > ROUTE WAS NOT Fonn uninstalled routing configuration');}); / / overall configuration router.define (detailsPage, handler: detailsHandler);}} static Router of Fluro

This step is to make Router static directly for ease of use, so that it can be called directly on any page without having to call New.

Create a new application.dart file 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 we use it.

Now we have basically configured the routing of Fluro. Although this configuration is a little complicated, it is hierarchical and organized, and it is also very scalable.

Register / inject routes to the top layer

Open the main.dart file, and introduce the configuration file and static file, routes.dart and application.dart, on the home page as follows:

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

After the introduction, we need to assign the value and carry on the injection program. 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 / / static routing / /-main code end theme: ThemeData (primaryColor:Colors.pink,), home:IndexPage (),) }}

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

Use on the home page

Now to use routing in the home page, 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 the hot zone to open the product details page details_page.dart.

Open the home_page.dart file, find the ontap event in the hot zone list, and then use application to jump directly in the ontap event, as follows:

Application.router.navigateTo (context, "/ detail?id=$ {val ['goodsId']}")

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

These are all the contents of the article "sample Analysis of the introduction and use of Flutter routing fluro". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.