flutter路由fluro的封装

全文参考https://segmentfault.com/a/1190000021488577，并总结

 

1.安装fluro

2.在lib文件夹内创建一个routers文件夹

3.在routers文件夹中创建application.dart

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

 

4.在routers文件夹中创建routes.dart

// 这个页面是设置路由跳转衔接模块

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



class Routes { // 这边是配置路由，可以将路由直接写在以下的配置里，这里是单独将路由拿出来，这种方法后面可以直接拿变量用
  static String root = '/'; //根目录
  static String detailsPage = '/detail'; //详情页面

=======================================单独将路由拿出来========================================================= 

static void configureRoutes(Router router){//路由配置 //找不到路由 
　　router.notFoundHandler = new Handler( 
　　　　handlerFunc: (BuildContext context,Map<String,List<String>> params){
　　　　　　 print('页面找不到报错了'); 
　　} ); 

　　//整体配置--对应路由的页面 handler的值是跳转另一个页面后要处理的内容  

　　router.define(root, handler: indexPageHanderl); // root对应的是相应的路由“/”，这里是在外面定义好了

} }

 

不拿出来的写法：但是后面的文件也需要改

// 这个页面是设置路由跳转衔接模块

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



class Routes { //配置类
  
  //静态方法
  static void configureRoutes(Router router){//路由配置
    //找不到路由
    router.notFoundHandler = new Handler(
        handlerFunc: (BuildContext context,Map<String,List<String>> params){
          print('页面找不到报错了');
        }
    );


    //整体配置--对应路由的页面  handler的值是跳转另一个页面后要处理的内容
    router.define("/", handler: indexPageHanderl);



  }

}

 

5.在routers文件夹中创建router_handler.dart

// 这个页面是设置穿什么参数等

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import '../routers/routers.dart';
import '../pages/index_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);
//  });
//


// 跳转首页--不带参数
Handler indexPageHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {

      return IndexPage();
});

 

6.在routers文件夹中创建navigator_utils.dart，将所有的跳转都写在这里，后面调用的时候只需要调用NavigatorUtil类里面 的方法

// 这个里面主要是进行路由跳转方法的公共书写

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
//import 'package:maitianshanglv_driver/pages/app_common_module/login.dart';
import '../pages/index_page.dart';
import './application.dart';
import './routers.dart';

class NavigatorUtil {
  // 返回
  static void goBack(BuildContext context) {

    Navigator.pop(context);
    Application.router.pop(context);
  }

    // 带参数返回
  static void goBackWithParams(BuildContext context, result) {
    Navigator.pop(context, result);
  }

  // 路由返回指定页面
  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);
  }


//  自定义转场动画
  static Future gotransitionCustomDemoPage(BuildContext context, String title) {
    var transition = (BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation, Widget child) {
      return new ScaleTransition(
        scale: animation,
        child: new RotationTransition(
          turns: animation,
          child: child,
        )
      );
    };
    return Application.router.navigateTo(context, title,

    transition: TransitionType.custom,
//    指定自定义动画
    transitionBuilder: transition,

//    自定义动画
    transitionDuration: const Duration(milliseconds: 600));

}


  /// 使用 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) => IndexPage(),
        ), (route) => route == null);

  }
}

 

7.在main.dart中注册路由，在build中注册

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    引入路由的代码
    final router = Router(); Routes.configureRoutes(router); Application.router = router; //    引入路由的代码end


    return Container(
      child: MaterialApp(
//        这里也要写上路由的代码
 onGenerateRoute: Application.router.generator, //        这里也要写上路由的代码end



        home: IndexPage(),
      ),
    );
  }
}

8.使用方法，使用navigator_utils.dart文件中的类

NavigatorUtil.jump(context, '/normalPage');
NavigatorUtil.jump(context, '/routingReference?id=200');
NavigatorUtil.goToLoginRemovePage(context);

 

9.接收参数

widget.orderId就是传过来的参数

class WaitingForRide extends StatefulWidget {
  WaitingForRide({this.orderId}); final String orderId;
  @override
  _WaitingForRideState createState() => _WaitingForRideState();
}

class _WaitingForRideState extends State<WaitingForRide> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            brightness: Brightness.light,
            title: Text('${widget.orderId}'), 
            elevation: 0.0,
          ),
        ),

 

注意中文传参问题：

NavigatorUtil.jump(context, '/routingReference?id=${Uri.encodeComponent("中文参数")}');