構(gòu)建Flutter應(yīng)用
下載Flutter SDK
mac os環(huán)境
可以添加鏡像服務(wù)器到環(huán)境變量中(https://flutterchina.club/setup-macos/)
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
下載地址(https://flutter.dev/docs/development/tools/sdk/archive?tab=macos#macos)
解壓unzip 或者 tar -zxvf
解壓成功夠添加環(huán)境變量
vim /etc/profile
source profile
執(zhí)行
flutter doctor
如果正確的話會(huì)顯示還需要安裝哪些組件，如果出現(xiàn)錯(cuò)誤那么請(qǐng)檢查之前的步驟，或者下載的sdk是否有問題
根據(jù)doctor提示拯勉，全部都是?即可，或者只有android也可以冯事，但是IOS真機(jī)無法調(diào)試
IDE設(shè)置
https://flutterchina.club/get-started/editor/#androidsstudio
IDE可以用android studio 或者 vs code
可以新建工程嘗試hello word
Android項(xiàng)目與Flutter混合開發(fā)(Debug)
1.首先創(chuàng)建一個(gè)flutter_module項(xiàng)目
2.在你主項(xiàng)目的settings.gradle中添加下列代碼
setBinding(new Binding([gradle: this]))
evaluate(new File(
'你的目錄/flutter_module/.android/include_flutter.groovy'
))
或者
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'flutter_module/.android/include_flutter.groovy'
))
3.在主項(xiàng)目的app目錄下的build.gradle文件中添加Flutter庫的依賴
dependencies {
implementation project(':flutter')
}
4.頁面的跳轉(zhuǎn)
public class MyFlutterActivity extends FlutterActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
}
}
這樣基本上就ok了，可以運(yùn)行起來測(cè)試一下看是否能跳轉(zhuǎn)flutter頁面
如果失敗那么需要看看主app assets目錄下有沒有flutter_assets這個(gè)文件夾血公，如果沒有可能是權(quán)限問題昵仅，無法復(fù)制flutter_module的這個(gè)文件到主目錄下
可以去flutter_module目錄下找flutter_assets并復(fù)制到app assets目錄下
還有一種失敗可能是ABI設(shè)置問題
ndk {
// 設(shè)置支持的 SO 庫構(gòu)架
abiFilters 'armeabi', 'armeabi-v7a' , 'x86'
}
Flutter返回Native
MyFlutterActivity增加Plugin監(jiān)聽
public class MyFlutterActivity extends FlutterActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
new MethodChannel(getFlutterView(), "f.route/plugin")
.setMethodCallHandler((methodCall, result) -> {
//判斷call返回參數(shù)，跳轉(zhuǎn)相應(yīng)邏輯
switch (methodCall.method){
case "finish": {
finish();
result.success("200");
break;
}
default:result.notImplemented();
}
});
GeneratedPluginRegistrant.registerWith(this);
}
}
Flutter頁面增加跳轉(zhuǎn)
最簡(jiǎn)單不帶參數(shù)的跳轉(zhuǎn)
const routePlugin =const MethodChannel("f.route/plugin");
Future<Null> _onRouteFinish() async {
String result =await routePlugin.invokeMethod("finish");
}
Flutter頁面增加按鈕并設(shè)置調(diào)用方法
FlatButton(
child: Image(image: AssetImage("images/icon_back.png"),
width: 16,
height: 16,
),
onPressed: _onRouteFinish,
)
這樣基本上就成功了。
Android項(xiàng)目與Flutter混合開發(fā)(Release)
release真的有點(diǎn)麻煩摔笤，搞得有點(diǎn)頭禿
如果按照下面的流程走如果最后還是報(bào)錯(cuò)那么請(qǐng)不要懷疑够滑，趕緊聯(lián)系我QQ:812405389
第一步 檢查、整理
刪除assets下flutter_assets文件夾
這個(gè)主要是因?yàn)镈ebug和Release的方式是不同的吕世，Debug下面會(huì)有kernel_blob.bin這個(gè)文件彰触，而release這個(gè)文件會(huì)被isolate_snapshot_instr和vm_snapshot_instr代替。
詳細(xì)的不同可以查看flutter_module/.android/Flutter/build/intermediates/flutter
下面會(huì)有debug/release兩個(gè)不同的文件夾命辖，只要run/bulid 就會(huì)生成
檢查APP支持的SO庫架構(gòu)
abiFilters 'armeabi', 'armeabi-v7a'
如果只對(duì)armeabi-v7a支持那么就不需要管了况毅，如果有對(duì)其他的架構(gòu)支持那么就需要注意一會(huì)要復(fù)制的so包
下面這個(gè)檢查可做可不做，我也是因?yàn)榘袥_突才會(huì)修改
implementation 'com.android.support:support-v4:26.+'
// implementation 'com.android.support:support-v13:27.1.1'
implementation 'com.android.support:support-annotations:27.1.1'
flutter創(chuàng)建的時(shí)候會(huì)自動(dòng)添加v13的包尔艇，這個(gè)包和我已有的supportv4包版本有沖突尔许，所以我屏蔽了原來的v13增加了v4 26+的版本，如果你的項(xiàng)目在加入了flutter可以正常運(yùn)行那么這里可以不需要修改漓帚。
Rebuild Project
第二步 復(fù)制關(guān)鍵文件
執(zhí)行flutter build apk 成功會(huì)生成apk包母债，這時(shí)去flutter_module/.android/Flutter/build/intermediates/flutter/release 文件加下復(fù)制
把選中的文件復(fù)制到 app assets文件夾下
第三步 復(fù)制so包
這一步非常重要，如果引入錯(cuò)誤那么就會(huì)在打開flutter頁面的時(shí)候就會(huì)報(bào)錯(cuò)尝抖，如果出現(xiàn)提示ABI或者VM之類的錯(cuò)誤，那么就很有可能是這一步出現(xiàn)了問題迅皇。
flutter會(huì)在armeabi-v7a自動(dòng)加入libflutter.so這個(gè)文件昧辽，而其他的架構(gòu)下就沒有，所以要復(fù)制libflutter.so到其他架構(gòu)下登颓。
flutter_root/?bin?/?cache/?artifacts/engine
這個(gè)文件夾下面會(huì)有flutter.jar這個(gè)jar包搅荞，解壓后找到libflutter.so文件復(fù)制到armeabi文件夾下，如果你需要支持其他的架構(gòu)那么就從其他的release文件夾下需要so包框咙。
然后重新Rebuild Project
第四步 安裝
這里有兩種方式
1.apk
apk的方式就是打一個(gè)正式包出來然后安裝到手機(jī)上就可以咕痛，如果上述步驟沒有問題的話那么應(yīng)該可以正確顯示flutter頁面，并且跳轉(zhuǎn)頁面的時(shí)候也不會(huì)黑屏白屏
2.run
在android studio右下角找到Build Variants選項(xiàng)卡喇嘱，如果的項(xiàng)目沒有做特殊的配置的話默認(rèn)應(yīng)該是debug茉贡，點(diǎn)擊app右邊的debug選擇release然后run app就可以了，效果和apk方式一樣者铜。
這樣基本上就完成了Android項(xiàng)目與Flutter混合開發(fā)的Demo
