flutter 路由插件fluro配置及其使用

flutter 路由插件fluro配置及其使用

pubspec.yaml:引入插件

dependencies:
  flutter:
    sdk: flutter
  fluro: "^1.6.3"

1. 首先创建一个router_handler.dart文件，定义路由去到哪个部件，以及传递给该部件的参数：

router_handler.dart文件如下：

import 'pagckage:flutter/material.dart';
//引入路由插件fluro 需要在pubspec.yaml文件中配置插件并下载才能引入
import 'pagckage:fluro/fluro.dart';
//引入路由跳转去到的部件
import '../pages/user.dart';

Handler userHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  //params是跳转路由url?后面传递的参数，我们需要参数里面的id值并传递给跳转到的部件内
  return User(params["id"][0]);
});
//下面还可以继续添加如上的路由跳转Handler
...

2. 下面就是给路由命名的 routes.dart 文件
routes.dart文件如下：

import 'pagckage:flutter/material.dart';
//引入路由插件fluro 需要在yml文件中配置插件并下载才能引入
import 'pagckage:fluro/fluro.dart';
//引入决定路由跳转去到而的部件router_handler
import './router_handler.dart';
//没有对应匹配路由时去的部件
import './page_404.dart';

class Routes {
  static String root = '/';
  static String user = '/user';
  ...
  static void configureRoutes(Router router) {
    //notFoundHandler是匹配不到路由时执行出发的
    router.notFoundHandler = new Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params)) {
       //这是可以定义一个404页面部件
       return Page404();
    };
    //根路由时去homeHandler部件 当然router_handler.dart里我没定义homeHandler，可自行配置
    router.define(root, handler: homeHandler);
    //user路由时去userHandler部件
    router.define(user, handler: userHandler);
    //也可以直接写路由路径
    router.define('/user/:id', handler: userHandler);
  }
}

3. 静态化路由： 目的：使路由静态化
application.dart 文件如下：

import 'pagckage:fluro/fluro.dart';
class Application{
  static Router router;
}

4. 在main.dart 内注入路由，相当于给全局注入路由

...
import './routers/application.dart';
import './routers/routes.dart';

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

class MyApp extends StatelessWidget {
  //注入路由
  final router = Router();
  Router.congigureRoutes(router);
  Application.router = router;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      onGenerataRoute: Application.router.generator, //全局注入路由
	  ...	
    );
  }
}

5. 使用路由：

InkWell(
  onTap: (){
     //通过Application的路由就可以跳转页面啦
     Application.router.navigateTo(context, "/user?id=${userId}")
  },
  child: ...
)