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}'),
),
);
}
}
网友评论