Flutter路由專案實戰之fluro

鄭正好發表於2020-01-03
Flutter路由

github: github.com/zhengzhuang…

關於flutter路由，在小專案中，就按照原生寫法，但是在大型專案中，這樣的我就不會進行推薦，我這裡使用的fluro路由管理方案，大型專案中非常nice，現在開始啥也不說了，看我操作就行了

fluro: ^1.5.1

注：自認為是Flutter最亮，最時髦，最酷的路由器。複製程式碼

在大型專案中，你要問我什麼叫大型，我感覺超過20就算了吧，具體什麼叫大型，我也不知道，哈哈哈

首先呢，在專案中新建一個routers資料夾，與main.dart同級，這個資料夾就是我們的路由資料夾，建好之後，我們開始進行建立路由

1:新建application.dart

import 'package:fluro/fluro.dart';
class Application {
    static Router router;
}複製程式碼

2:新建routes.dart

這個頁面就配置我們的路由調轉連結模組

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

class Routes {
    static String root = '/';
    static String indexPage = '/indexPage';
    static String normalPage = '/normalPage';
    static String routingReference = '/routingReference';
    static String login = '/login';
    static void configureRoutes(Router router) {
        router.notFoundHandler = new Handler(
            handlerFunc: (BuildContext context, Map<String, List<String>> params) {
                print('ERROR====>ROUTE WAS NOT FONUND!!!'); // 找不到路由，跳轉404頁面
                print('找不到路由，404');
            },
        );

        // 路由頁面配置
        router.define(indexPage, handler: indexPageHanderl);
        router.define(normalPage, handler: normalPageHanderl);
        router.define(routingReference, handler: routingReferenceHanderl);
        router.define(login, handler: loginHanderl);
    }
}複製程式碼

3:新建router_handler.dart

handler就是每個路由的規則，編寫handler就是配置路由規則，比如我們要傳遞引數，引數的值是什麼，這些都需要在Handler中完成。

import 'package:flutter/material.dart';

import 'package:fluro/fluro.dart';import 'package:flutter_fluro/pages/index_page.dart';import 'package:flutter_fluro/pages/login.dart';import 'package:flutter_fluro/pages/normal_page.dart';import 'package:flutter_fluro/pages/routing_reference.dart';
// 首頁
Handler indexPageHanderl = Handler(  
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {    
        return IndexPage();  
    },
);

// 正常路由跳轉
Handler normalPageHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        return NormalPage();
    }
);

// 路由傳參
Handler routingReferenceHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        String id = params['id'].first;
        return RoutingReference(id: id);
    }
);

// 登陸頁面
Handler loginHanderl = Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
        return Login();
    }
);
複製程式碼

4:新建navigator_util.dart

這個裡面主要是進行路由跳轉方法的公共書寫

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:maitianshanglv_driver/pages/app_common_module/login.dart';
import 'package:maitianshanglv_driver/pages/index_page.dart';
import './application.dart';import './routes.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.homePage, replace: true);
    }
    
    /// 跳轉到 轉場動畫 頁面 ， 這邊只展示 inFromLeft ，剩下的自己去嘗試下，
    /// 框架自帶的有 native，nativeModal，inFromLeft，inFromRight，inFromBottom，fadeIn，custom
    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);
    }

    // 跳轉到主頁面IndexPage並刪除當前路由
    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);
    }
}複製程式碼

5:接下來基本上路由模組建立完成

需要到main.dart資料夾進行註冊一下

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'pages/index_page.dart';
import 'routers/routes.dart';
import 'routers/application.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
    @override  
    Widget build(BuildContext context) {    
        //-------------------路由主要程式碼start    
        final router = Router();    
        Routes.configureRoutes(router);    
        Application.router = router;    
        //-------------------路由主要程式碼end    
        return Container(      
            child: MaterialApp(        
                title: 'fluro',                    //----------------路由主要程式碼start        
                onGenerateRoute: Application.router.generator,        
                //----------------路由主要程式碼end        
                debugShowCheckedModeBanner: false,        
                theme: ThemeData(          
                    brightness: Brightness.light,  // 整體頁面背景顏色          
                    primaryColor: Color.fromARGB(255, 78, 79, 95),  // 整體AppBar顏色          
                    // accentColor: Colors.cyan[600],        
                ),        
                home: IndexPage(),      
            ),    
        );  
    }
}複製程式碼

大功告成，到這裡關於flutter採用fluro方式進行的大型專案路由管理就算成功，

使用方法：

NavigatorUtil.jump(context, '/normalPage');
NavigatorUtil.jump(context, '/routingReference?id=200');
NavigatorUtil.goToLoginRemovePage(context);複製程式碼

注意：中文傳參問題

NavigatorUtil.jump(context, '/routingReference?id=${Uri.encodeComponent("中文引數")}');複製程式碼

相關文章