fluro:flutter路由

  1. 1. 概述
  2. 2. 使用方法
    1. 2.1 添加依赖
    2. 2.2 添加路由代码
    3. 2.3 路由初期化和注册

1. 概述

Fluro是flutter的路由插件,能够很方便的进行静态路由导航,和字符串路由传参。

Fluro Github (https://github.com/theyakka/fluro)

example代码位置: example

2. 使用方法

2.1 添加依赖

修改
<project>/pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.
  # git: git://github.com/theyakka/fluro.git
  fluro: ^1.5.1

2.2 添加路由代码

  • 全局路由表application.dart
import 'package:fluro/fluro.dart';

class Application {
    static Router router;
}
  • 路由与组件结合类routers.dart

    /为根路由,app默认第一个界面。
    notFoundHandler为app找不到页面时所显示的页面。

import 'package:fluro/fluro.dart';
import 'router_handler.dart';

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

static void configureRoutes(Router router) {
    router.notFoundHandler = notFoundWidgetHandler;
    router.define(root, handler: homePageHandler);
    router.define(home, handler: homePageHandler);
}
}
  • 组件句柄声明与定义router_handler.dart
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_example/views/my_home_page.dart';
import 'package:flutter_example/widgets//404.dart';

/// 主页
var homePageHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    String title = params['title']?.first ?? 'my home page';
    return MyHomePage(title: title);
},
);

/// Not Found 页面
var notFoundWidgetHandler = new Handler(handlerFunc: (BuildContext context, Map<String, List<String>> params) {
    return NotFoundWidget();
});

2.3 路由初期化和注册

app类为StatefulWidget组件

State的构造函数中对路由进行初期化(flutter声明周期)。
通过MaterialApponGenerateRoute回调函数进行路由注册。

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter_example/routers/routers.dart';
import 'package:flutter_example/routers/application.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  _MyAppState() {
    // init router
    final router = new Router();    // ☆☆☆☆☆
    Routes.configureRoutes(router); // ☆☆☆☆☆
    Application.router = router;    // ☆☆☆☆☆
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: Application.router.generator, // ☆☆☆☆☆
    );
  }
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 wind.kaisa@gmail.com

文章标题:fluro:flutter路由

本文作者:kaisawind

发布时间:2019-09-20, 07:35:50

最后更新:2020-12-01, 10:28:14

原始链接:https://kaisawind.gitee.io/2019/09/19/2019-09-20-flutter-fluro/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏