fluro:flutter路由 - Fri, Sep 20, 2019

fluro:flutter路由

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 添加路由代码

import 'package:fluro/fluro.dart';

class Application {
    static Router router;
}

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);
}
}

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声明周期)。 通过MaterialApp的onGenerateRoute回调函数进行路由注册。

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, // ☆☆☆☆☆
    );
  }
}