FlutterBoost如何集成使用

在Flutter项目中集成FlutterBoost时遇到了一些问题：

  1. 官方文档的步骤不太清晰，是否有更详细的集成指南？
  2. Native端和Flutter端的初始化配置该如何正确对接？
  3. 混合栈管理时经常出现页面黑屏或路由混乱，该如何解决？
  4. 是否有完整的demo项目可以参考具体实现？
2 回复

FlutterBoost集成步骤：

  1. 在pubspec.yaml添加依赖
  2. 在Android/iOS原生工程初始化FlutterBoost
  3. 配置路由管理
  4. 使用FlutterBoost页面跳转方法 支持混合开发，管理原生与Flutter页面通信。

更多关于FlutterBoost如何集成使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


FlutterBoost是Flutter官方推荐的混合开发框架，用于在原生应用中嵌入Flutter页面。以下是集成和使用步骤：

1. 添加依赖

在Flutter项目的 pubspec.yaml 中添加：

dependencies:
  flutter_boost: ^3.0.0

运行 flutter pub get 安装。

2. Flutter端初始化

在 main.dart 中初始化FlutterBoost：

import 'package:flutter_boost/flutter_boost.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    FlutterBoost.singleton.registerPageBuilders({
      'flutterPage': (pageName, params, _) => FlutterPage(params: params),
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(), // 可为空容器
      builder: FlutterBoost.init(),
    );
  }
}

3. 原生端配置

Android端：

  • 在 MainActivity 中集成：
class MainActivity : FlutterBoostActivity() {
    override fun getContainerName(): String? = "main"
}

iOS端：

  • 在 AppDelegate 中初始化：
import FlutterBoost

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let router = PlatformRouter()
        FlutterBoostPlugin.sharedInstance().startFlutter(with: router) { engine in }
        return true
    }
}

4. 页面跳转

从原生跳转到Flutter页面：

  • Android：
FlutterBoost.instance().open("flutterPage")
  • iOS：
FlutterBoostPlugin.open("flutterPage")

Flutter内跳转：

FlutterBoost.singleton.open("flutterPage");

5. 参数传递

通过 params 传递数据：

FlutterBoost.singleton.open("flutterPage", arguments: {"key": "value"});

在Flutter页面通过 BoostContainerState 获取参数。

注意事项

  • 确保Flutter和原生版本兼容。
  • 页面名称需在Flutter端注册。
  • 处理页面生命周期和内存管理。

以上步骤可快速集成FlutterBoost，实现混合开发。

回到顶部