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("中文參數")}');