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

This article will explain in detail how to configure and jump the fluro of Flutter routing. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Pubspec.yaml guide package, pay attention to the format ~

Dependencies: flutter: sdk: flutter fluro: ^ 1.6.32, create a new routing class, change the class to define the path of the page, and then set the handler and path of the page to the route

The class Routers {static Router router; / / folder must be at the same level as the main.dart directory static String root ='/'; static String loginPage ='/ loginPage'; static String tabsPage ='/ tabsPage'; static String messageDetailPage ='/ messageDetailPage'; static String serviceSettingPage ='/ serviceSettingPage'; static void configureRoutes (Router router) {router.notFoundHandler = Handler (handlerFunc: (BuildContext context, Map params) {print ("ROUTE WAS NOT FOUND!!"); return null }); router.define (loginPage, handler: loginHandler); router.define (messageDetailPage, handler: messageDetailHandler); router.define (tabsPage, handler: tabsHandler); router.define (serviceSettingPage, handler: serviceSettingHandler) } / / encode a pair of parameters to solve the problem that special characters in the parameters affect fluro route matching, especially Chinese static Future navigateTo (BuildContext context, String path, {Map params, TransitionType transition = TransitionType.inFromRight, bool replace = false}) {String query = "; if (params! = null) {int index = 0 For (var key in params.keys) {var value = Uri.encodeComponent (params [key]); if (index = = 0) {query = "?";} else {query = query + "\ &";} query + = "$key=$value"; index++;}} print ('I am the parameter passed by navigateTo: $query'); path = path + query Return router.navigateTo (context, path, transition: transition, replace: replace) } static void finishAllToLoginPage () {/ / Jump to the specified page and close all current pages / / closing all pages will cause the tabs_page page to execute initState first, and then dispose, resulting in no longer listening, so pay attention to Global.navKey.currentState.pushAndRemoveUntil (new MaterialPageRoute (builder: (context) = > new LoginPage ()), (route) = > route = = null) / / will execute dispose}} 3 of all pages, create a new router_handler.dart, process parameters and jump pages

/ Log in to var loginHandler = new Handler (handlerFunc: (BuildContext context, Map params) {return new LoginPage ();}); / / message details page var messageDetailHandler = new Handler (handlerFunc: (BuildContext context, Map params) {/ / fetch String barTitle = params ["bar_title"]? .first; String itemDataJson = params ["item_data"]? .first; return new MessageDetailPage (barTitle: barTitle, itemDataJson: itemDataJson,);}) / / Home page Tabsvar tabsHandler = new Handler (handlerFunc: (BuildContext context, Map params) {return new TabsPage ();}); / / Service settingvar serviceSettingHandler = new Handler (handlerFunc: (BuildContext context, Map params) {return new ServiceSettingPage ();}); 4. Call and pass parameters

/ / object needs to be changed to String String itemDataJson = FluroConvertUtils.object2string (_ bulletinsList [index]) Routers.navigateTo (context, Routers.messageDetailPage, params: {'bar_title': "Detail",' item_data': itemDataJson,}); 5. Receive data

/ / String returns the object Bulletins itemData = Bulletins.fromJson (FluroConvertUtils.string2map (itemDataJson)); 6. The problem arises, because fluro cannot directly transmit Chinese, so coding and decoding are needed here, that is, encode and decode.

Class FluroConvertUtils {/ fluro converts before passing Chinese parameters. Fluro does not support Chinese static String fluroCnParamsEncode (String originalCn) {return jsonEncode (Utf8Encoder (). Convert (originalCn));} / / fluro parses the parameters after passing them, parsing static String fluroCnParamsDecode (String encodeCn) {var list = List (); / / string decoding jsonDecode (encodeCn) .forEach (list.add); String value = Utf8Decoder (). Convert (list); return value } / string to int static int string2int (String str) {return int.parse (str);} / / string to double static double string2double (String str) {return double.parse (str);} / / string to bool static bool string2bool (String str) {if (str = = 'true') {return true;} else {return false }} / object to string json static String object2string (T t) {return fluroCnParamsEncode (jsonEncode (t));} / / string json to map static Map string2map (String str) {return json.decode (fluroCnParamsDecode (str));}}

Perfect solution. This is also the whole process used by fluro, which is basically encapsulated in small packages, and Routers needs to be initialized in main.dart:

MyApp () {/ / Registration initialization fluro final router = Router (); Routers.configureRoutes (router); Routers.router = router;} this article on "how to configure and jump fluro for Flutter routing" ends here. I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

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.