当前位置：首页 > news >正文

FlutterBoost快速集成模板：5分钟搭建项目骨架的完整指南

news 2026/4/6 18:50:14

FlutterBoost快速集成模板：5分钟搭建项目骨架的完整指南

【免费下载链接】flutter_boostFlutterBoost is a Flutter plugin which enables hybrid integration of Flutter for your existing native apps with minimum efforts项目地址: https://gitcode.com/gh_mirrors/fl/flutter_boost

FlutterBoost是阿里巴巴开源的新一代Flutter-Native混合解决方案，它能够让你像使用WebView一样轻松地将Flutter集成到现有的原生应用中。无论你是Flutter新手还是有经验的开发者，这篇快速集成指南将帮助你在5分钟内搭建完整的FlutterBoost项目骨架，实现原生与Flutter页面的无缝混合导航。😊

📋 快速集成核心步骤

1. Dart端集成配置

首先在你的Flutter项目的pubspec.yaml文件中添加FlutterBoost依赖：

dependencies: flutter_boost: git: url: 'https://gitcode.com/gh_mirrors/fl/flutter_boost.git' ref: '4.6.3'

运行flutter pub get命令后，Dart端就集成完成了。接下来配置主应用入口：

import 'package:flutter_boost/flutter_boost.dart'; void main() { CustomFlutterBinding(); runApp(MyApp()); } class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding {}

2. Android端配置模板

在Android项目的build.gradle中添加依赖：

dependencies { implementation project(':flutter') implementation project(':flutter_boost') }

在AndroidManifest.xml中添加必要的Activity声明：

<activity android:name="com.idlefish.flutterboost.containers.FlutterBoostActivity" android:theme="@style/Theme.AppCompat" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize" > </activity>

3. iOS端配置模板

在iOS项目的Podfile中添加Flutter模块集成：

flutter_application_path = '../your_flutter_module' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') install_all_flutter_pods(flutter_application_path)

然后执行pod install完成依赖安装。

🚀 核心路由配置模板

FlutterBoost应用初始化

创建一个完整的FlutterBoost应用初始化模板：

class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Map<String, FlutterBoostRouteFactory> routerMap = { 'mainPage': (RouteSettings settings, String uniqueId) { return CupertinoPageRoute( settings: settings, builder: (_) { Map<String, Object> map = settings.arguments as Map<String, Object>; String data = map['data'] as String; return MainPage(data: data); }); }, 'simplePage': (settings, uniqueId) { return CupertinoPageRoute( settings: settings, builder: (_) { Map<String, Object> map = settings.arguments as Map<String, Object>; String data = map['data'] as String; return SimplePage(data: data); }); }, }; Route<dynamic> routeFactory(RouteSettings settings, String uniqueId) { FlutterBoostRouteFactory func = routerMap[settings.name] as FlutterBoostRouteFactory; return func(settings, uniqueId); } Widget appBuilder(Widget home) { return MaterialApp( home: home, debugShowCheckedModeBanner: true, builder: (_, __) => home, ); } @override Widget build(BuildContext context) { return FlutterBoostApp( routeFactory, appBuilder: appBuilder, ); } }

📱 多平台支持配置

Android端代理配置

在Android的Application中设置FlutterBoost代理：

public class App extends Application { @Override public void onCreate() { super.onCreate(); FlutterBoost.instance().setup(this, new FlutterBoostDelegate() { @Override public void pushNativeRoute(FlutterBoostRouteOptions options) { Intent intent = new Intent( FlutterBoost.instance().currentActivity(), YourTargetActivity.class ); FlutterBoost.instance().currentActivity() .startActivityForResult(intent, options.requestCode()); } @Override public void pushFlutterRoute(FlutterBoostRouteOptions options) { Intent intent = new FlutterBoostActivity.CachedEngineIntentBuilder( FlutterBoostActivity.class) .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent) .destroyEngineWithActivity(false) .uniqueId(options.uniqueId()) .url(options.pageName()) .urlParams(options.arguments()) .build(FlutterBoost.instance().currentActivity()); FlutterBoost.instance().currentActivity().startActivity(intent); } }, engine -> {}); } }

iOS端代理配置

创建iOS的FlutterBoost代理：

class BoostDelegate: NSObject, FlutterBoostDelegate { var navigationController: UINavigationController? func pushNativeRoute(_ pageName: String!, arguments: [AnyHashable : Any]!) { let targetViewController = UIViewController() self.navigationController?.pushViewController(targetViewController, animated: true) } func pushFlutterRoute(_ options: FlutterBoostRouteOptions!) { let vc = FBFlutterViewContainer() vc.setName(options.pageName, uniqueId: options.uniqueId, params: options.arguments, opaque: options.opaque) self.navigationController?.pushViewController(vc, animated: true) } }

🔧 高级功能配置模板

页面拦截器配置

FlutterBoost支持页面跳转拦截器，可以在跳转前后执行自定义逻辑：

class CustomInterceptor extends BoostInterceptor { @override void onPrePush(BoostInterceptorOption option, PushInterceptorHandler handler) { Logger.log('CustomInterceptor#onPrePush, $option'); // 添加额外参数 option.arguments!['customData'] = "from_interceptor"; super.onPrePush(option, handler); } @override void onPostPush(BoostInterceptorOption option, PushInterceptorHandler handler) { Logger.log('CustomInterceptor#onPostPush, $option'); handler.next(option); } } // 在FlutterBoostApp中使用 FlutterBoostApp( routeFactory, appBuilder: appBuilder, interceptors: [CustomInterceptor()], );

页面生命周期监听

配置全局页面可见性观察者：

class AppGlobalPageVisibilityObserver extends GlobalPageVisibilityObserver { @override void onPagePush(Route<dynamic> route) { Logger.log('AppGlobalPageVisibilityObserver.onPageCreate: ${route.settings.name}'); } @override void onPageShow(Route<dynamic> route) { Logger.log('AppGlobalPageVisibilityObserver.onPageShow: ${route.settings.name}'); } } // 在main函数中注册 void main() { PageVisibilityBinding.instance .addGlobalObserver(AppGlobalPageVisibilityObserver()); CustomFlutterBinding(); runApp(MyApp()); }

📊 项目结构最佳实践

核心文件路径参考

FlutterBoost主库: lib/flutter_boost.dart
应用入口配置: lib/src/flutter_boost_app.dart
路由导航器: lib/src/boost_navigator.dart
容器管理: lib/src/boost_container.dart
示例项目: example/lib/main.dart

🎯 快速验证模板

创建一个简单的验证页面来测试集成是否成功：

class MainPage extends StatelessWidget { final String data; const MainPage({Key? key, required this.data}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('FlutterBoost集成测试'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('数据: $data'), SizedBox(height: 20), ElevatedButton( onPressed: () { // 跳转到原生页面 FlutterBoost.instance.push('native_page'); }, child: Text('跳转到原生页面'), ), SizedBox(height: 10), ElevatedButton( onPressed: () { // 跳转到另一个Flutter页面 FlutterBoost.instance.push('simplePage', arguments: {'data': '来自MainPage的数据'}); }, child: Text('跳转到Flutter页面'), ), ], ), ), ); } }