flutter 企业级路由fluro使用记录

Fluro企业级路由

地址：https://pub.flutter-io.cn/packages/fluro

导入：

dependencies:
  fluro: ^1.7.8

$ flutter pub get

创建配置文件：

创建routes.dart，用来注册路由。

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/route/router_handlers.dart';

class Routes{
  //注册路由名称
  static String root = '/';
  static String page1 = '/page1';

  static void configureRouts(FluroRouter router){
    router.notFoundHandler = Handler(
      // ignore: missing_return
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print("ROUTE WAS NOT FOUND !!!");
      }
    );
　　//此处handler在下方
    router.define(root, handler: rootHandler);
    router.define(page1, handler: page1Handler);
  }
}

创建router_handlers.dart管理页面以及参数传递

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/home.dart';
import 'package:flutter_app/pages/page1.dart';

//不需要传参数
var rootHandler =Handler(
  // ignore: missing_return
  handlerFunc:(BuildContext context,Map<String,List<String>> params){

    return HomePage();
  }
);

//普通类型参数 通过url传递 在params中获取
// 数组、map、等复杂的数据模型以arguments传递
var page1Handler = Handler(
  // ignore: missing_return
  handlerFunc: (BuildContext context,Map<String,List<String>> params){
    // var id = params['id'].first;
    // var name = params['name'].first;
    var data =  context.settings.arguments;
    print(data);
    //return Page1(id,name);
    return Page1(data);
  }
);

 

创建程序级全局静态application.dart，方便调用。

import 'package:fluro/fluro.dart';

class ApplicationRouter{
  static FluroRouter router;
}

接下来就是在程序入口创建全局静态实例。

void main() {
  final router =FluroRouter();
  Routes.configureRouts(router);
  ApplicationRouter.router = router;
  runApp(MyApp());
}

然后在MaterialApp中添加

 Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: ApplicationRouter.router.generator,//此处将注册好的router写入
    );
  }

开始使用：

在需要跳转到页面执行（不带参数）

 ApplicationRouter.router.navigateTo(context, '/page1');//此处page1为页面注册的路由名称 在routes.dart文件中

在需要跳转到页面执行（带普通String参数）

 ApplicationRouter.router.navigateTo(context, '/page1?id=123123&name=zhangsan');
//此处为url带参数方式，多个参数以&分隔，多个参数的配置参考router_handlers.dart

在需要跳转到页面执行（带参数--复杂的数据模型）

ApplicationRouter.router.navigateTo(context, '/page1',routeSettings: RouteSettings(arguments: {"key":"value","key":"value"}))
.then((value) => print(value['name']));//如果有回调参数就用.then方法接收。没有的话不用写.then方法

 跳转页面替换当前页面

ApplicationRouter.router.navigateTo(context, '/page1', replace: true);//replace 设置为true表示替换当前页为下一页。

 

接收参数页面

import 'package:flutter/material.dart';
import 'package:flutter_app/route/application.dart';

class Page1 extends StatelessWidget {
  //接收url传来的String参数
  // String id;
  // String name;
  // Page1({this.id,this.name});

  //接收复杂的数据模型参数
  var data;
  Page1(this.data);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: Text(
            data[0],
            style: TextStyle(fontSize: 50, color: Colors.amber),
          ),
        ),
      ],
    );
  }
}

 返回：

返回上一页

 ApplicationRouter.router.pop(context);

清空历史记录

ApplicationRouter.router.navigateTo(context, '/page1', clearStack: true);//clearStack为true时，表示跳转到指定页面并清除历史记录

Fluro可以说是非常强大的路由插件，本人将使用过程记录下来，有不对的地方或者有问题的地方欢迎大家指出。小白一枚。