前言
- 最近在使用flutter仿寫公司的客戶端,在一段的時間的使用后發(fā)現(xiàn)flutter在一些常見的控件中,很多無法滿足,往往在輪子上需要耗費大量的時間,目前就我們的項目來看,相同的時間,如果改用Native去寫,我覺得兩者進度并沒有多大的差異,可能原生端反而會更快一些。
- 在現(xiàn)有項目中集成Flutter,可以在flutter還沒有成熟的時期,去使用,追求共通點,同時對于已有客戶端進行混編
現(xiàn)有項目中集成Flutter
- 創(chuàng)建Flutter module模板(我們在一個Android項目目錄同級目錄下創(chuàng)建模板工程)
flutter create -t module my_flutter - 添加Flutter module到Android項目中
- 修改Android項目根目錄的settings.gradle,將Flutter module作為一個子工程添加到項目中
// MyApp/settings.gradle
include ':app' // assumed existing content
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'my_flutter/.android/include_flutter.groovy' // new
))
- Sync一下,可以發(fā)現(xiàn)添加了兩個module到項目中了。其中一個是flutter的module,其中包含了一些簡單的封裝,供Java代碼調(diào)用。另一個是package_info的module,是一個Flutter插件就是獲取app名稱、包名、版本等信息
- 在app的build.gradle中添加依賴
// MyApp/app/build.gradle
:
dependencies {
implementation project(':flutter')
}
- Sync一下,到此,這個Flutter module就被添加到了Android項目中了
開始使用
- 在我的MainActivity.java里面寫代碼
// MainActivity.java
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
View flutterView = Flutter.createView(
MainActivity.this,
getLifecycle(),
"route1"
);
FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(600, 800);
layout.leftMargin = 100;
layout.topMargin = 200;
addContentView(flutterView, layout);
}
});
-
上面我們使用字符串“route1”告訴Dart代碼在Flutter視圖中顯示哪個小部件。 Flutter模塊項目模板的lib / main.dart文件包含提供的路由字符串,需要哪些路徑字符串以及如何解釋它們?nèi)Q于我們自己
-效果如下所示,但是我還是有些失望,黑一下的效果的確讓人難以接受,不過這項技術(shù)確實挺有吸引力,一起期待flutter的完善吧
GIF.gif
