Flutter flutter_boost 集成

刚开始接触使用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磨合pause
  CustomFlutterBinding();
  runApp(const MyApp());
}

// 创建一个自定义的Biding，继承和with的关系如下，里面什么都不用写
class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding{
    
    }

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});
// FlutterBoostRouteFactory 使用
// 这是创建了一个文件单独管理路由映射表 HYRouter
  Route<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.
  @override
  Widget build(BuildContext context) {
    
    
    return FlutterBoostApp(
    // 这里是使用上面工厂 route
      routeFactory,
      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 {
    
    
  @override
  State<StatefulWidget> createState() {
    
    
    return _HelloPageState();
  }
}

class _HelloPageState extends State<HelloPage> {
    
    
  @override
  Widget 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 of
                BoostNavigator.instance.push(HYRouter.detail,arguments: {
    
    "home":"home界面传给detail的数据"});
              },
            )
          ],
        ),
      ),
    );
  }

}

页面返回上一级

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

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

Flutter flutter_boost 集成

猜你喜欢