flutter使用 fluro管理路由

fluro是flutter生态中比较优秀的一个路由管理框架，包含以下特点：

• Simple route navigation
• Function handlers (map to a function instead of a route)
• Wildcard parameter matching
• Querystring parameter parsing
• Common transitions built-in
• Simple custom transition creation

简单翻译以下：

• 简单的路由导航
• 函数处理程序（映射到函数而不是路由）
• 通配符参数匹配
• 内置常见转换
• 简单的自定义过渡创建

开始安装

打开项目根路径中的pubspec.yaml文件，并在dependencies下面增加fluro的依赖：fluro: ^1.6.0，后面的版本号根据fluro最新版本填入。然后运行flutter pub get。至此，安装就完成了，可以直接在代码中引入并使用。

路由规划

• splash app启动页面
• login 登陆界面
• home 登陆后首页
• detail 详情页

代码修改

main.dart文件将不必要的文件删除，改为：

import 'package:flutter/material.dart';
import 'app.dart';

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

并且新增 app.dart文件，用以包含路由配置：

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';

import 'pages/detail/detail.dart';
import 'pages/home/home.dart';
import 'pages/login/login.dart';
import 'pages/not_found/not_found.dart';
import 'pages/splash/splash.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        //Map
        "/splash": (context) => new SplashPage(),
        "/login": (context) => new LoginPage(),
        "/home": (context) => new HomePage(),
        "/detail": (context) => new DetailPage(),
      },
      onUnknownRoute: (RouteSettings setting) {
        String name = setting.name;
        print("onUnknownRoute:$name");
        return new MaterialPageRoute(builder: (context) {
          return new NotFoundPage();
        });
      },
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SplashPage(),
    );
  }
}

再根据目录创建相应的page页面，此处不赘述：

image

并在页面中显示相应内容，

本文为原创文章，转载请保留原出处。原文地址：https:/eatong.cn/blog/17