Flutter中的企业级路由配置

在实际开发中，flutter自带路由让我们用起来很不爽，操作起来不是很便捷，因此给大家推荐一款企业级路由组件 fluro下载地址

附一张路由目录结构图吧

1. 在 pubspec.yaml 文件中安装最新版本的插件

fluro: "^1.6.3"

2. 在lib目录下新建一个routers目录，用于存放handler文件
3. 创建router_handler.dart文件——开发路由

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import '../pages/details_page.dart';

// Handler就是控制器的意思，也可以说操作器
Handler detailsHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params){
    String goodsId = params['id'].first;
    print('index>details goodsId: $goodsId');

    return DetailsPage(goodsId);
  }
);

3. 创建routes.dart文件——配置路由

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

// 引入Handler
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('ERROR ===> ROUTE WAS NOT FOUND*********');
      }
    );

    // 配置路由(到这一步，就可以使用了，但是为了方便使用，我们还要做一件事，建一个静态文件，方便使用，也叫静态化)
    router.define(detailsPage, handler: detailsHandler);
  }
}

4. 创建application.dart文件——静态化路由（可省略）

import 'package:fluro/fluro.dart';

class Application {
  static Router router;
}

5. 在全局注入路由并使用（main.dart中做如下配置）

import 'package:flutter/material.dart';
// 引入企业级路由框架
import 'package:fluro/fluro.dart';
// 引入路由配置文件
import './routers/routes.dart';
// 引入静态文件
import './routers/application.dart';

void main()  => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // 初始化路由
    final router = Router();
    // 配置路由
    Routes.configureRoutes(router);
    Application.router = router;
    
    return Container(
      child: MaterialApp(
        title: '初学fluro',
        debugShowCheckedModeBanner: false,
        // 配置项目主题色
        theme: ThemeData(
          primaryColor: Colors.pink
        ),
        home: IndexPage(),
        onGenerateRoute: Application.router.generator,  // 静态化方法
      ),
    );
  }
}

举个栗子： 在列表页到详情页的跳转：

// 在列表页点击商品后跳转
onTap: (){
	// 使用路由跳转
	Application.router.navigateTo(context, "/detail?id=5}");
},

// 详情页
import 'package:flutter/material.dart';

class DetailsPage extends StatelessWidget {

  final String goodsId;
  // 默认构造函数接受路由传递的参数
  DetailsPage(this.goodsId);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('商品id：${this.goodsId}'),
    );
  }
}

至此，我们的企业级路由组件就配置完成了，小伙伴，你们学会了吗？