陕西网站备案陕西住房和城乡建设部网站首页

刚开始接触使用flutter boost路由的心得体会记录如下：

Fltter项目部分：

• 第一步
  在Flutter项目的 pubspec.yaml文件中添加如下信息：

flutter_boost:git:url: 'https://github.com/alibaba/flutter_boost.git'ref: '4.3.0'

之后在flutter工程下运行flutter pub get dart端就集成完毕了，然后可以在dart端上使用flutter boost了。

• 第二步
  在main.dart 文件中进行代码编写

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:list/douban/hyrouter.dart';void main() {// 这里的CustomFlutterBinding 调用务必不可缺少，用于控制Boost状态的resume磨合pauseCustomFlutterBinding();runApp(const MyApp());
}// 创建一个自定义的Biding，继承和with的关系如下，里面什么都不用写
class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding{}class MyApp extends StatelessWidget {const MyApp({super.key});
// FlutterBoostRouteFactory 使用
// 这是创建了一个文件单独管理路由映射表 HYRouterRoute<dynamic>? routeFactory(RouteSettings settings, String? uniqueId) {FlutterBoostRouteFactory func = HYRouter.routeMap[settings.name] as FlutterBoostRouteFactory;return func(settings, uniqueId);}Widget appBuilder(Widget home) {return MaterialApp(home: home,debugShowCheckedModeBanner: true,// 必须加上builder参数，否则 showDialog 等会出问题builder: (_, __){return home;},);}// This widget is the root of your application.@overrideWidget build(BuildContext context) {return FlutterBoostApp(// 这里是使用上面工厂 routerouteFactory,appBuilder: appBuilder);}
}

路由管理类：

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:list/douban/detail.dart';
import 'hello.dart';class HYRouter {static const String home = '/';static const String detail = '/detail';static final Map<String, FlutterBoostRouteFactory> routeMap = {
// 路由注册home:(settings, uniqueId) {return MaterialPageRoute(settings: settings,builder: (_) {return HelloPage();});},detail:(settings, uniqueId) {return MaterialPageRoute(settings:  settings,builder: (_) {final map = settings.arguments as Map<String, dynamic>;print("detail: ${map}");return DetailPage();});}};}

创建 home = ‘/’ widget，进入flutter的入口

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:list/douban/hyrouter.dart';class HelloPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _HelloPageState();}
}class _HelloPageState extends State<HelloPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("home"),),body: Center(child: Column (mainAxisAlignment: MainAxisAlignment.center,children: [TextButton(child: Text("跳转详情"),onPressed: () {print("点击跳转详情");// 使用flutter boost跳转，也可以使用 Navigator ofBoostNavigator.instance.push(HYRouter.detail,arguments: {"home":"home界面传给detail的数据"});},)],),),);}}

页面返回上一级

 BoostNavigator.instance.pop("点击返回首页的数据");

到此一个简单集成 使用 flutter boos完毕