flutter 使用fluro
1.在pubspec.yaml文件中写以下这条，并pub get
fluro: 1.7.8
2.在main.dart注册路由，如果有报错，在使用编辑器的时候引入相应的库就行
@override Widget build(BuildContext context) { // 注册路由 final router = FluroRouter(); Routes.configureRoutes(router); Application.router = router;
return MaterialApp( onGenerateRoute:Application.router.generator, //注册路由 // home: MyHomePage(), home: IndexPage(), ); }
3.创建一个routers文件夹，放相关的路由配置
a. 创建applaction.dart
import 'package:fluro/fluro.dart'; class Application{ static FluroRouter router; }
b.创建routers.dart，这个文件是用来配置路由的
// 这个页面是设置路由跳转衔接模块 import 'package:fluro/fluro.dart'; import 'package:flutter/material.dart'; import './router_handler.dart'; class Routes { //配置类 // 这边是配置路由 static String root = '/'; //根目录 static String index = "/index"; static String searchpage = "/searchpage"; // 搜索页面 //静态方法 static void configureRoutes(FluroRouter router){//路由配置 //找不到路由 router.notFoundHandler = new Handler( handlerFunc: (BuildContext context,Map<String,List<String>> params){ print('页面找不到报错了'); } ); //整体配置--对应路由的页面 handler的值是跳转另一个页面后要处理的内容 router.define(root, handler: rootPageHanderl); router.define(index, handler: indexPageHanderl); router.define(searchpage, handler: searchpageHanderl); } }
c.创建router_handler.dart文件，这个文件是路由具体要跳的页面，也可以和上面的那个文件写一起
// 这个页面是设置穿什么参数等 import 'package:blog/indexPage.dart'; import 'package:blog/pages/searchPage.dart'; import 'package:blog/pages/splash_page.dart'; import 'package:flutter/material.dart'; import 'package:fluro/fluro.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); // }); // // 跳转首页--不带参数 Handler indexPageHanderl = Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return IndexPage(); }); // 跳转引导页 Handler rootPageHanderl = Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return SplashPage(); }); // 搜索页面 Handler searchpageHanderl = Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return SearchPage(); });
d.创建文件nativgatior_utils.dart（这个文件是各种跳转方式）
// 这个里面主要是进行路由跳转方法的公共书写 import 'dart:io'; import 'package:blog/indexPage.dart'; import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; //import 'package:maitianshanglv_driver/pages/app_common_module/login.dart'; import './application.dart'; import './routers.dart'; class NavigatorUtil { /** * 退出app */ static outApp(context){ showDialog( context: context, builder: (context) => AlertDialog(title: Text('确定要退出吗 ?', style: TextStyle(fontSize: 20),), actions: <Widget>[ RaisedButton( child: Text('退出' , style: TextStyle(fontSize: 20),), onPressed: () => exit(0) ), RaisedButton( color: Colors.blue, child: Text('取消' , style: TextStyle(fontSize: 20),), onPressed: () => Navigator.of(context).pop(false)), ])); } //返回 static void goBack(BuildContext context) { //Navigator.pop(context); if (Navigator.canPop(context)) { Navigator.pop(context); }else{ Navigator.pushNamed(context, Routes.index); } } //带参数返回 static void goBackWithParams(BuildContext context, result) { Navigator.pop(context, result); } //路由跳转指定页面，带参数 static void goPage(BuildContext context, String title) { return Application.router.pop(context,title); } // 路由返回指定页面 static void goBackUrl(BuildContext context, String title) { Navigator.popAndPushNamed(context, title); } // 路由跳转到主页面 static void goHomePage(BuildContext context) { Application.router.navigateTo(context, Routes.root, replace: true); // 如果有给路由赋值就用Routes.root root是routes文件定义的字符串路径，没有直接用"/"等路由 } // 跳转到转场动画页面 static Future jump(BuildContext context, String title) { return Application.router.navigateTo(context, title, transition: TransitionType.inFromRight); } /// 框架自带的有 native，nativeModal，inFromLeft，inFromRight，inFromBottom，fadeIn，custom static Future jumpLeft(BuildContext context, String title) { return Application.router.navigateTo(context, title, transition: TransitionType.inFromLeft); } static Future jumpRemove(BuildContext context) { return Navigator.of(context).pushAndRemoveUntil( MaterialPageRoute(builder: (context) => IndexPage(),), (route) => route == null); } /// 使用 IOS 的 Cupertino 的转场动画，这个是修改了源码的 转场动画 /// /// Fluro本身不带，但是 Flutter自带 static Future gotransitionCupertinoDemoPage( BuildContext context, String title) { return Application.router.navigateTo(context, title, transition: TransitionType.cupertino); } // 跳转到主页面并删除当前路由 static void goToHomeRemovePage(BuildContext context) { Navigator.of(context).pushAndRemoveUntil( MaterialPageRoute( builder: (context) => IndexPage(), ), (route) => route == null); } // 跳转到登陆页并删除当前路由 // static void goToLoginRemovePage(BuildContext context) { // Navigator.of(context).pushAndRemoveUntil( // MaterialPageRoute( // builder: (context) => Login(), // ), (route) => route == null); // // } ///指把当前页面在栈中的位置替换成跳转的页面（替换导航器的当前路由，通过推送路由[routeName]），当新的页面进入后，之前的页面将执行dispose方法。 static pushReplacementNamed(BuildContext context, String routeName) { Navigator.pushReplacementNamed(context, routeName); } ///切换无参数页面 Navigator.of(context).pushNamed 直接进入一个新的界面 static Future pushNamed(BuildContext context, String routeName) { return Application.router.navigateTo(context, routeName, transition: TransitionType.cupertino, routeSettings: RouteSettings(name: routeName), // 自定义动画 transitionDuration: const Duration(milliseconds: 600)); } //切换参数页面 Navigator.of(context).pushNamed static Future pushNamedWithParam(BuildContext context, String routeName,param) { return Application.router.navigateTo(context, routeName, transition: TransitionType.cupertino, routeSettings: RouteSettings(name: routeName,arguments: param), // 自定义动画 transitionDuration: const Duration(milliseconds: 600)); } /** * 指将当前页面pop，然后跳转到制定页面（将当前路由弹出导航器，并将命名路由推到它的位置。） */ static popAndPushNamed(BuildContext context, String routeName){ Navigator.maybePop(context) .then((v){ pushNamed(context,routeName); }); } /** * 指将当前页面pop，然后跳转到制定页面（将当前路由弹出导航器，并将命名路由推到它的位置。） */ static popAndPushNamedWithParam(BuildContext context, String routeName,param){ Navigator.maybePop(context) .then((v){ pushNamedWithParam(context,routeName,param); }); } /** * 指将制定的页面加入到路由中，然后将其他所有的页面全部pop, (Route<dynamic> route) => false将确保删除推送路线之前的所有路线。 */ static pushNamedAndRemoveUntil (BuildContext context, String routeName){ Navigator.of(context).pushNamedAndRemoveUntil(routeName, (Route<dynamic> route) => false); } /** * 指将制定的页面加入到路由中 */ static pushNamedAndRemoveUntilThat(BuildContext context, String routeName,String untilRName){ Navigator.of(context).pushNamedAndRemoveUntil(routeName, ModalRoute.withName(untilRName)); } /** * 指将制定的页面加入到路由中 */ static pushNamedAndRemoveUntilThatParam(BuildContext context, String routeName,String untilRName,param){ Navigator.of(context).pushNamedAndRemoveUntil(routeName, ModalRoute.withName(untilRName),arguments: param); } /** * maybePop 会自动进行判断，如果当前页面pop后，会显示其他页面，不会出现问题，则将执行当前页面的pop操作 */ static maybePop(BuildContext context){ Navigator.of(context).maybePop(); } ///Page页面的容器，做一次通用自定义 static Widget pageContainer(widget, BuildContext context) { return MediaQuery( ///不受系统字体缩放影响 data: MediaQuery.of(context).copyWith(textScaleFactor: 1), child: widget); } }
e.使用
onTap: () { NavigatorUtil.jump(context, "/searchpage"); },
