目錄
2、運行：flutter create -t module flutter_lib命令扇谣，flutter_lib這個名字自己起昧捷，代表flutter module的名稱，運行完畢如下圖罐寨。
4、在native項目的app的 build.gradle文件中添加 java8的支持
6楞慈、native的app的build.gradle文件中添加flutter依賴并同步
7幔烛、添加flutter-boost，在flutter_lib的pubspec.yaml文件中添加如下依賴囊蓝，這里是根據(jù)flutter_boost的github文檔添加
8饿悬、檢查鏈接是否正確，使用：flutter build apk命令檢查是否完成flutter_boost和其他庫的依賴聚霜，如果出現(xiàn)錯誤根據(jù)錯誤解決所有錯誤直到編譯成功為止狡恬。9珠叔、native端flutter_boost初始化配置
Flutter-boost是咸魚開源的一個flutter插件，是一個flutter-native混合開發(fā)解決方案弟劲，今天聊一聊flutter-boost如何集成到android原生項目
一祷安、Flutter_Boost是什么
新一代Flutter-Native混合解決方案。 FlutterBoost是一個Flutter插件兔乞，它可以輕松地為現(xiàn)有原生應(yīng)用程序提供Flutter混合集成方案汇鞭。FlutterBoost的理念是將Flutter像Webview那樣來使用。在現(xiàn)有應(yīng)用程序中同時管理Native頁面和Flutter頁面并非易事庸追。 FlutterBoost幫你處理頁面的映射和跳轉(zhuǎn)霍骄，你只需關(guān)心頁面的名字和參數(shù)即可（通常可以是URL）淡溯。
二读整、準(zhǔn)備工作
1、flutter sdk 的版本需要 v1.9.1-hotfixes分支咱娶，否則會編譯失敗.
2米间、原生項目最好先換成support庫，androidx會出現(xiàn)意想不到的問題
3豺总、保證flutter的運行環(huán)境正常
三车伞、已經(jīng)有Native項目
1择懂、命令行進(jìn)入項目目錄
搭建Flutter-Native混合工程喻喳，并集成咸魚Flutter_boost
image.gif
?
2、運行：flutter create -t module flutter_lib命令困曙，flutter_lib這個名字自己起表伦，代表flutter module的名稱，運行完畢如下圖慷丽。
image
image.gif
?
這個時候你的native工程下會出現(xiàn)一個“flutter_lib”的目錄蹦哼，如下圖
image
image.gif
?
3、編譯android模板項目
命令行進(jìn)入 ".android"目錄下要糊，執(zhí)行“gradlew flutter:assembleDebug”命令纲熏，運行完畢后會在 .android/Flutter/build/outputs/aar/目錄下生成flutter-debug.aar
4、在native項目的app的 build.gradle文件中添加 java8的支持
image
image.gif
?
5锄俄、在native項目的settings.gradle文件中增加如下配置局劲，關(guān)聯(lián)flutter_lib,重點是要配置include_flutter.groovy文件的路勁，添加完畢后同步項目
image
image.gif
?
6奶赠、native的app的build.gradle文件中添加flutter依賴并同步
implementation project(':flutter')
image.gif
7鱼填、添加flutter-boost，在flutter_lib的pubspec.yaml文件中添加如下依賴毅戈，這里是根據(jù)flutter_boost的github文檔添加
dev_dependencies:
flutter_test:
sdk: flutter
flutter_boost:
git:
url: 'https://github.com/alibaba/flutter_boost.git'
ref: '0.1.60'
image.gif
8苹丸、檢查鏈接是否正確愤惰，使用：flutter build apk命令檢查是否完成flutter_boost和其他庫的依賴，如果出現(xiàn)錯誤根據(jù)錯誤解決所有錯誤直到編譯成功為止赘理。
9宦言、native端flutter_boost初始化配置
第一步：app的build.gradle文件中添加flutter_boost依賴
image
image.gif
?
第二步：自定義Application并在onCreate中初始化flutter_boost
public class MyApplication extends Application {
private final static String TAG = MyApplication.class.getSimpleName();
@Override
public void onCreate() {
super.onCreate();
//路由,Flutter 啟動Native頁面的時候回調(diào)這里
INativeRouter router = new INativeRouter() {
@Override
public void openContainer(Context context, String url, Map<String, Object> urlParams, int requestCode, Map<String, Object> exts) {
Log.i(TAG, "路由--INativeRouter:url=" + url);
Log.i(TAG, "路由--INativeRouter:requestCode=" + requestCode);
Log.i(TAG, "路由--INativeRouter:urlParams=" + urlParams);
Log.i(TAG, "路由--INativeRouter:exts=" + exts);
String assembleUrl = Utils.assembleUrl(url, urlParams);
PageRouter.openPageByUrl(context, assembleUrl, urlParams);
}
};
//插件注冊
FlutterBoost.BoostPluginsRegister pluginsRegister = new FlutterBoost.BoostPluginsRegister() {
@Override
public void registerPlugins(PluginRegistry mRegistry) {
GeneratedPluginRegistrant.registerWith(mRegistry);
//注冊native的TextView插件，插件名稱：TextPlatformViewPlugin
TextPlatformViewPlugin.register(mRegistry.registrarFor("TextPlatformViewPlugin"));
}
};
//配置
Platform platform = new FlutterBoost.ConfigBuilder(this, router)
.isDebug(true)
.whenEngineStart(FlutterBoost.ConfigBuilder.ANY_ACTIVITY_CREATED)
.renderMode(FlutterView.RenderMode.texture)
.pluginsRegister(pluginsRegister)
.build();
//初始化flutter_boost
FlutterBoost.instance().init(platform);
}
}
image.gif
第三步：在Native的Activity中編寫調(diào)用代碼商模，native調(diào)用flutter蜡励，通過傳入url和params打開對應(yīng)的Flutter widget
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btnOpenNative;
private Button btnOpenFlutter;
private Button btnOpenFlutterFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnOpenNative = findViewById(R.id.btnOpenNativePage);
btnOpenFlutter = findViewById(R.id.btnOpenFlutterPage);
btnOpenFlutterFragment = findViewById(R.id.btnOpenFlutterFragment);
btnOpenNative.setOnClickListener(this);
btnOpenFlutter.setOnClickListener(this);
btnOpenFlutterFragment.setOnClickListener(this);
}
@Override
public void onClick(View v) {
Map<String, String> params = new HashMap<>();
params.put("test1", "v_test1");
params.put("test2", "v_test2");
switch (v.getId()) {
case R.id.btnOpenNativePage:
PageRouter.openPageByUrl(this, PageRouter.NATIVE_PAGE_URL, params);
break;
case R.id.btnOpenFlutterPage:
//打開一個flutter頁面
PageRouter.openPageByUrl(this, PageRouter.FLUTTER_PAGE_URL, params);
break;
case R.id.btnOpenFlutterFragment:
//打開一個flutter創(chuàng)建的fragment的activity原生page
PageRouter.openPageByUrl(this, PageRouter.FLUTTER_FRAGMENT_PAGE_URL, params);
break;
}
}
}
image.gif
頁面路由控制的輔助類PageRouter的實現(xiàn)，它負(fù)責(zé)管理Native到Flutter的路由調(diào)用以及Flutter調(diào)用Native的路由
public class PageRouter {
public final static Map<String, String> pageName = new HashMap<String, String>() {{
put("first", "first");
put("second", "second");
put("tab", "tab");
put("sample://flutterPage", "flutterPage");
}};
public static final String NATIVE_PAGE_URL = "sample://nativePage";
public static final String FLUTTER_PAGE_URL = "sample://flutterPage";
public static final String FLUTTER_FRAGMENT_PAGE_URL = "sample://flutterFragmentPage";
public static boolean openPageByUrl(Context context, String url, Map params) {
return openPageByUrl(context, url, params, 0);
}
public static boolean openPageByUrl(Context context, String url, Map params, int requestCode) {
String path = url.split("\\?")[0];
Log.i("openPageByUrl", path);
try {
if (pageName.containsKey(path)) {
//打開指定url的flutter頁面
Intent intent = BoostFlutterActivity.withNewEngine().url(pageName.get(path)).params(params)
.backgroundMode(BoostFlutterActivity.BackgroundMode.opaque).build(context);
if (context instanceof Activity) {
Activity activity = (Activity) context;
activity.startActivityForResult(intent, requestCode);
} else {
context.startActivity(intent);
}
return true;
} else if (url.startsWith(FLUTTER_FRAGMENT_PAGE_URL)) {
//打開flutter創(chuàng)建的fragment
context.startActivity(new Intent(context, FlutterFragmentPageActivity.class));
return true;
} else if (url.startsWith(NATIVE_PAGE_URL)) {
//打開原生Activity
context.startActivity(new Intent(context, NativePageActivity.class));
return true;
}
return false;
} catch (Throwable t) {
return false;
}
}
}
image.gif
Flutter側(cè)代碼實現(xiàn)阻桅，在flutter側(cè)直接實現(xiàn)對應(yīng)的Widget凉倚，最后根據(jù)路由pageName將其返回給native即可
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter_lib/page_widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
///FlutterBoost注冊，給Native返回Flutter的pageWidget
FlutterBoost.singleton.registerPageBuilders({
'flutterFragment': (pageName, params, _) => FragmentRouteWidget(params),
///可以在native層通過 getContainerParams 來傳遞參數(shù)
'flutterPage': (pageName, params, _) {
print("flutterPage params:$params");
return FlutterRouteWidget(params: params);
},
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Boose example',
builder: FlutterBoost.init(postPush: _onRoutePushed),
home: Container(),
);
}
///
/// 當(dāng)Native調(diào)用flutter widget時回調(diào)
///
void _onRoutePushed(
String pageName, String uniqueId, Map params, Route route, Future _) {
print("flutter端路由：pageName:$pageName\n params:$params\n route:$route");
}
}
image.gif
FlutterRouteWidget組件實現(xiàn)嫂沉，一個flutter實現(xiàn)的native Activity頁面
///
/// flutter提供給native的頁面widget
///
class FlutterRouteWidget extends StatefulWidget {
//構(gòu)造方法，接受native傳遞的參數(shù)
FlutterRouteWidget({this.params, this.message});
final Map params;
final String message;
@override
State<StatefulWidget> createState() {
return _FlutterRouteWidgetState();
}
}
class _FlutterRouteWidgetState extends State<FlutterRouteWidget> {
@override
Widget build(BuildContext context) {
final String message = widget.message;
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
textTheme: new TextTheme(title: TextStyle(color: Colors.black)),
title: Text('flutter_boost_example'),
),
body: Container(
margin: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10.0, bottom: 20.0),
child: Text(
message ??
"This is a flutter activity\n params:${widget.params}",
style: TextStyle(fontSize: 28.0, color: Colors.blue),
),
alignment: AlignmentDirectional.center,
),
InkWell(
child: Container(
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
color: Colors.yellow,
child: Text(
'open native page',
style: TextStyle(fontSize: 22.0, color: Colors.black),
),
),
///點擊事件趟章，打開Native
///后面的參數(shù)會在native的IPlatform.startActivity方法回調(diào)中拼接到url的query部分杏糙。
///例如：sample://nativePage?aaa=bbb
onTap: () => FlutterBoost.singleton
.open("sample://nativePage", urlParams: {
"query": {"aaa": "bbb"}
}),
)
],
),
),
);
}
}
image.gif
FragmentRouteWidget組件實現(xiàn)，flutter實現(xiàn)的native的Fragment
image.gif
///
/// flutter實現(xiàn)的fragment
///
class FragmentRouteWidget extends StatelessWidget {
FragmentRouteWidget(this.params);
final Map params;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('flutter_boost_example'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 80.0),
child: Text(
"This is a flutter fragment",
style: TextStyle(fontSize: 28.0, color: Colors.blue),
),
alignment: AlignmentDirectional.center,
),
InkWell(
child: Container(
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
color: Colors.yellow,
child: Text(
'open native page',
style: TextStyle(fontSize: 22.0, color: Colors.black),
)),
onTap: () => FlutterBoost.singleton.open("sample://nativePage"),
)
],
),
);
}
}
image.gif
第四步：AndroidMenifest文件的配置蚓土，注冊BoostFlutterActivity宏侍，這個類必須注冊不然無法啟動Flutter Widget，在所有需要啟動Flutter Widget的Activity注冊時都需要加入 ：android：hardwareAccelerated="true”這個屬性蜀漆。
<!-- 這個必須注冊谅河，不然無法打開flutter的頁面-->
<activity
android:name="com.idlefish.flutterboost.containers.BoostFlutterActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
android:hardwareAccelerated="true"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="@drawable/page_loading" />
</activity>
image.gif
以上步驟都走完之后就可以編譯運行了，本次的重點在于講解Native項目怎么樣集成flutter并引入Flutter_boost确丢，關(guān)于flutter_boost的具體用法后面會推出绷耍。
最后貼出我最終運行后的結(jié)果圖：
圖1 點擊 “打開Flutter頁面”---->圖2，點擊“open native page” ----->圖3
image
image.gif
image
image.gif
image
image.gif
?
我的博客：https://blog.csdn.net/qq_19979101
flutter-boot搭建flutter混合項目：https://blog.csdn.net/qq_19979101/article/details/103777979
