[移动开发]Flutter入门系列-Flutter Fluro导航框架

一、添加依赖

dependencies:
  fluro: ^1.7.8

二、代码

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_fluro_navigator/login_router.dart';
import 'package:flutter_fluro_navigator/router_not_found.dart';
import 'irouter.dart';

class HiRouter {

  static FluroRouter getRouter(){
    return FluroRouter.appRouter;
  }

  static List<IRouter> _listRouters = [];

  static void registerConfigureRoutes(FluroRouter router){
    if (router == null){
        throw Exception("fluroRouter is null");
    }
    router.notFoundHandler = Handler(handlerFunc: (BuildContext context, Map<String, List<String>> parameters){
      print("notFoundHandler ");
      return RouterNotFound();
    });
    _listRouters.clear();
    //添加路由模块
    _listRouters.add(LoginRouter());
    _listRouters.forEach((element) {
        element.initFluroRouter(router);
    });
  }
}

import 'package:fluro/fluro.dart';

abstract class IRouter {

  void initFluroRouter(FluroRouter fluroRouter);

}

import 'package:fluro/fluro.dart';
import 'package:fluro/src/fluro_router.dart';
import 'package:flutter_fluro_navigator/irouter.dart';
import 'package:flutter_fluro_navigator/login_page.dart';
import 'package:flutter_fluro_navigator/login_userinfo_page.dart';
import 'package:flutter_fluro_navigator/userinfo.dart';

//用户登录相关页面
class LoginRouter extends IRouter {

  static String loginPage = "/login/loginPage";
  static String loginUserInfoPage = "/login/loginUserInfoPage";

  @override
  void initFluroRouter(FluroRouter fluroRouter) {
    fluroRouter.define(loginPage, handler: Handler(handlerFunc: (_, params){
          String userName = params[LoginPage.bundleKeyUserName]?.first;
          String password = params[LoginPage.bundleKeyPwd]?.first;
          print("userName $userName pwd $password");
          return LoginPage(userName: userName, pwd: password,);
    }));

    fluroRouter.define(loginUserInfoPage, handler: Handler(handlerFunc: (context, parms){
          final args = context.settings.arguments as UserInfo;
          return LoginUserInfoPage(userInfo: args,);
    }));
    
  }

}

//统一跳转配置
import 'package:fluro/fluro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_fluro_navigator/hi_router.dart';

class NavigatorUtils {

  //不带参数的跳转
  static void push(
      BuildContext context, String path, {bool replace = false, bool clearStack = false }){
     FocusScope.of(context).unfocus();
     HiRouter.getRouter().navigateTo(context, path,
         replace: replace,
         clearStack: clearStack,
         transition: TransitionType.native
     );
  }

  //在路径上带参数的跳转
  static void pushResult(
      BuildContext context, String path, Function(Object) function, {bool replace = false, bool clearStack = false
      }){
      FocusScope.of(context).unfocus();
      HiRouter.getRouter().navigateTo(context, path,
         replace: replace,
         clearStack: clearStack,
         transition: TransitionType.cupertino  // transition 路由动画设置
      ).then((value){
         if (value == null){
            return;
         }
         function(value);
      }).catchError((error){
          print("error message");
      });
  }

  //传递对象进行跳转
  static void pushArgument(
      BuildContext context, String path, Object argument,
      {bool replace = false, bool clearStack = false}){
    HiRouter.getRouter().navigateTo(context, path,
        routeSettings: RouteSettings(arguments: argument),
        replace: replace,
        clearStack: clearStack
    );
  }

  //传递对象进行跳转，并接收返回值
  static void pushArgumentResult(
      BuildContext context, String path, Object argument, Function(Object) function,
      {bool replace = false, bool clearStack = false}){

      HiRouter.getRouter().navigateTo(context, path,
       routeSettings: RouteSettings(arguments: argument), replace:replace, clearStack: clearStack, transition:
          TransitionType.fadeIn
      ).then((value){
         if (value == null){
            return;
         }
         function(value);
      }).catchError((error){
         print("$error");
      });
  }


  //跳转回上一页
  static void goBack(BuildContext context){
    FocusScope.of(context).unfocus();
    Navigator.pop(context);
  }

  //带参数跳转回上一页
  static void goBackWithParams(BuildContext context, result){
    FocusScope.of(context).unfocus();
    Navigator.pop(context, result);
  }

  //拼接参数 /login/loginpage?key1=value1&key2=value2
  static String changeToNavigatorPath(String registerPath,
        {Map<String, String> params}){
    if (params == null || params.isEmpty){
        return registerPath;
    }
    StringBuffer bufferStr = StringBuffer();
    params.forEach((key, value) {
        bufferStr..write(key)
                 ..write("=")
                 ..write(Uri.encodeComponent(value))
                 ..write("&");
    });
    String paramStr = bufferStr.toString();
    paramStr = paramStr.substring(0, paramStr.length -1);
    print("传递的参数 $paramStr");
    return "$registerPath?$paramStr";
  }

}

import 'package:flutter/material.dart';
import 'package:flutter_fluro_navigator/navigator_util.dart';

class LoginPage extends StatefulWidget {
  static const bundleKeyUserName = "userName";
  static const bundleKeyPwd = "pwd";

  final String userName, pwd;

  const LoginPage({Key key, this.userName, this.pwd}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Container(
        child: Column(
          children: [
            Text('LoginPage'),
            MaterialButton(
              onPressed: () {
                //返回给上一页面数据
                NavigatorUtils.goBackWithParams(context, "hello, I come from LoginPage ");
              },
              child: Text('点击返回前一页面'),
            )
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_fluro_navigator/userinfo.dart';

class LoginUserInfoPage extends StatefulWidget {
  final UserInfo userInfo;
  const LoginUserInfoPage({Key key, this.userInfo}) : super(key: key);

  @override
  _LoginUserInfoPageState createState() => _LoginUserInfoPageState();

}

class _LoginUserInfoPageState extends State<LoginUserInfoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('用户信息页面'),),
      body: Container(
        child: Column(
          children: [
            Text('用户信息页面 userName: ${widget.userInfo?.userName} nickName:${widget.userInfo?.userNickName}'),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class RouterNotFound extends StatelessWidget {
  const RouterNotFound({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('资源没有找到'),),
      body: Container(
        child: Center(
          child: Text('资源没有找到'),
        ),
      ),
    );
  }

}

import 'package:flutter/material.dart';
import 'package:flutter_fluro_navigator/hi_router.dart';
import 'package:flutter_fluro_navigator/navigator_util.dart';
import 'package:flutter_fluro_navigator/userinfo.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    HiRouter.registerConfigureRoutes(HiRouter.getRouter());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              MaterialButton(
                  child: Text('跳转到登录页面'),
                  // /login/loginPage?userName=lisi&pwd=123456
                  // /login/loginPage?userName=张三&pwd=123456 含有中文会报错 使用 Uri.encodeComponent 进行编码
                  onPressed: () {
                    var name = Uri.encodeComponent("张三");
                    NavigatorUtils.pushResult(context, "/login/loginPage?userName=$name&pwd=123456", (data) {
                      print(data);
                    });
                  }),
              MaterialButton(
                  child: Text('跳转到用户信息页面'),
                  // /login/loginPage?userName=lisi&pwd=123456
                  // /login/loginPage?userName=张三&pwd=123456 含有中文会报错 使用 Uri.encodeComponent 进行编码
                  onPressed: () {
                    var userInfo = UserInfo();
                    userInfo.userName = "lidan";
                    userInfo.userNickName ="dandan";
                    NavigatorUtils.pushArgumentResult(context, "/login/loginUserInfoPage", userInfo, (data) {
                         print(data);
                    });
                  }),
              MaterialButton(
                  child: Text('跳转到没有注册的或者未知页面'),
                  onPressed: () {
                    NavigatorUtils.push(context, "/login/UnKnownPage");
                  }),
            ],
          ),
        ));
  }
}

三、参考：

mirrors_lukepighetti/fluro

flutter导航fluro - 简书