Flutter 路由跳转fluro

文章目录

• • 添加依赖
  • 新建相关文件
  • 初始化配置
  • 使用路由
  • 路由执行startActivityForResult相似操作

添加依赖

#路由跳转
  fluro: ^1.4.0

新建相关文件

1. 新建application.dart文件,用于跳转时获取router

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

2. 新建route_handlers.dart文件,用于初始化跳转到各个页面的handle,并获取到上个页面传递过来的值,然后在初始化要跳转到的页面.

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_my_demo/page/home.dart';
import 'package:flutter_my_demo/page/webview.dart';

var homeHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  return new HomePage();
});

var webViewHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
  //获取路由跳转传来的参数
  String url = params["url"].first;
  String title = params["title"].first;
  return new WebViewPage(url, title);
});

3. 新建routes.dart文件,用于绑定路由地址和对应的handler.

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_my_demo/route/route_handlers.dart';

class Routes {
  static String root = "/";
  static String home = "/home";
  static String web = "/web";

  static void configureRoutes(Router router){
    router.notFoundHandler = new Handler(
        handlerFunc: (BuildContext context,Map<String,List<String>> params){
      print("route is not find !");
    });

    router.define(home, handler: homeHandler);
    router.define(web, handler: webViewHandler);
  }
}

初始化配置

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_my_demo/route/application.dart';
import 'package:flutter_my_demo/route/routes.dart';

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

class MyApp extends StatelessWidget {

  MyApp(){
    //初始化路由
    final router = new Router();
    Routes.configureRoutes(router);
    Application.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MySplashPage(),
      //初始化路由
      onGenerateRoute: Application.router.generator,
    );
  }
}

注意上边代码的两个初始化路由的步骤.

使用路由

1. 无参数跳转

Application.router.navigateTo(context, "/home",transition: TransitionType.fadeIn);

2. 有参数跳转

String route = '/web?url=${Uri.encodeComponent(itemUrl)}&title=${Uri.encodeComponent(itemTitle)}';
Application.router.navigateTo(context, route,transition: TransitionType.fadeIn);

或者

Application.router.navigateTo(context, '${Routes.web}?title=${Uri.encodeComponent(itemTitle)}&url=${Uri.encodeComponent(itemUrl)}',transition: TransitionType.fadeIn);

注意:参数的值需要使用Uri.encodeComponent()方法调用一下,要不会报错.
注意：路由跳转都是进栈操作，原有页面没有销毁。如果想跳转时同时销毁页面，可用原生的路由跳转方法：

Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) => HomePage()),
                (route) => route == null);

路由执行startActivityForResult相似操作

在跳转后边加then操作，then未跳转的页面销毁之后，回调执行的方法。

Application.router.navigateTo(context,
              '${Routes.web}?title=${Uri.encodeComponent(itemTitle)}&url=${Uri
                  .encodeComponent(itemUrl)}',
              transition: TransitionType.fadeIn).then((result){
                if(result == "key"){
                  //执行func路由,func路由为弹出弹窗
                  Application.router.navigateTo(context, "/demo/func?message=$result");
                }
          });

在跳转到的web页面要销毁时，执行Navigator.pop(context, 'key');方法.然后就会调用上边代码中的then方法了。

func路由的handler如下：

var demoFunctionHandler = new Handler(
    type: HandlerType.function,
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      String message = params["message"]?.first;
      showDialog(
        context: context,
        builder: (context) {
          return new AlertDialog(
            title: new Text(
              "Hey Hey!",
              style: new TextStyle(
                color: const Color(0xFF00D6F7),
                fontFamily: "Lazer84",
                fontSize: 22.0,
              ),
            ),
            content: new Text("$message"),
            actions: <Widget>[
              new Padding(
                padding: new EdgeInsets.only(bottom: 8.0, right: 8.0),
                child: new FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop(true);
                  },
                  child: new Text("OK"),
                ),
              ),
            ],
          );
        },
      );
    });