路由fluro

1、在pubspec.yaml中添加依赖

fluro: ^1.4.0

2、在main.dart里面引入

import 'package:fluro/fluro.dart';

3、在main()里面声明

final router=Router();

4、新建routers文件夹  新建router_handler.dart文件

import 'package:flutter/material.dart';

import 'package:fluro/fluro.dart';

import '../pages/details_page.dart';

//Handler相当于控制器

Handler detailsHandler=Handler(

handlerFunc: (BuildContext context,Map> params){

String goodsId=params['id'].first;

print(goodsId);

//返回要打开的页面

return DetailsPage();

}

);

5、新建routers.dart

import 'package:flutter/material.dart';

import 'package:fluro/fluro.dart';

import 'router_handler.dart';

//总体配置路由

class Routes{

static Stringroot="/";

static StringdetailsPage="/detail";

static void configuerRoutes(Router router){

//路由没找到

router.notFoundHandler=new Handler(

handlerFunc:(BuildContext context,Map> params){

print("ERROR===>ROUTE WAS NOT FOUND!!!!!");

}

);

router.define(detailsPage, handler: detailsHandler);

}

}

6、静态化  新建application.dart

import 'package:fluro/fluro.dart';

//静态化

class Application{

static Routerrouter;

}

7、在main.js中全局引入

import 'routers/routers.dart';

import 'routers/application.dart';

在MyApp的build方法中

class MyAppextends StatelessWidget {

@override

  Widget build(BuildContext context) {

final router=Router();

Routes.configuerRoutes(router);

Application.router=router;

//    扩展比较容易

    return Container(

child:MaterialApp(

title:"百姓生活+",

onGenerateRoute: Application.router.generator,

debugShowCheckedModeBanner:false,

theme:ThemeData(primaryColor: Colors.pink),

home:IndexPage(),

),

);

}

}

8、在需要引用的地方直接调用

import '../routers/application.dart';

//  /detail与routers.dart中的static StringdetailsPage="/detail";一致

//  id与router_handler.dart中的String goodsId=params['id'].first;一致

Application.router.navigateTo(context,"/detail?id=${e['goodsId']}");

9、接收参数的页面

import 'package:flutter/material.dart';

class DetailsPageextends StatelessWidget {

final StringgoodsId;

//构造函数这样写

  DetailsPage(this.goodsId);

@override

  Widget build(BuildContext context) {

return Container(

child:Center(

child:Text('商品id为：${goodsId}'),

),

);

}

}