最近惊奇的发现在目前的flutter dev for web 版本中可以用fish_redux管理路由,并且在目前的版本中不再是flutter_web 跟flutterfor iPhone分开的模式,开发者可以使用同一个包下面的UI来开发。目前三端开发都是使用flutter/material.dart中的组件,因此基本上可以做到一次编写,分别打包iOS,Android,web三端。
关于for web 的路由配置如下:
//在 main.dart中
import 'dart:collection';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:jobclient/app_route.dart';
import 'package:jobclient/utils/base_tools.dart';
void main() {
// println(name+"---------");
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
showSemanticsDebugger: false,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
// home: AppRoute.global.buildPage(RoutePath.APP_HOME, null),
onGenerateRoute: (RouteSettings settings) {
Map<String ,dynamic> map=BaseTools.urlToMap(settings.name);
if(!BaseTools.isEmpty(settings.arguments)){
println(settings.arguments.toString());
}
if(!BaseTools.isEmpty(map)){
return MaterialPageRoute<Object>(builder: (BuildContext context) {
return AppRoute.global.buildPage(settings.name.replaceAll("/", "").split("?")[0], map);
});
}else{
return MaterialPageRoute<Object>(builder: (BuildContext context) {
return AppRoute.global.buildPage(settings.name.replaceAll("/", "").split("?")[0], settings.arguments);
});
}
},
initialRoute: "app_home",
);
}
}
//urlToMap方法:
static Map<String,dynamic> urlToMap(String url){
Map<String,dynamic > map=new HashMap();
if(isEmpty(url)||!url.contains("?")){
return null;
}else{
List<String> urlList=url.split("?");
urlList=urlList[urlList.length-1].split("&");
for(int i=0;i<urlList.length;i++){
map[urlList[i].split("=")[0]]=urlList[i].split("=")[1];
}
}
return map;
}
这样配置的目的是,在浏览器,如果想直接访问页面可以使用url/[路由名称]?XXX=XXX&XXX=XXX的方式来访问并传值。