构建Flutter应用
下载Flutter SDK
mac os环境
可以添加镜像服务器到环境变量中(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
解压成功够添加环境变量
vim /etc/profile
source profile
执行
flutter doctor
如果正确的话会显示还需要安装哪些组件,如果出现错误那么请检查之前的步骤,或者下载的sdk是否有问题
根据doctor提示,全部都是✅即可,或者只有android也可以,但是IOS真机无法调试
IDE设置
https://flutterchina.club/get-started/editor/#androidsstudio
IDE可以用android studio 或者 vs code
可以新建工程尝试hello word
Android项目与Flutter混合开发(Debug)
1.首先创建一个flutter_module项目
2.在你主项目的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.在主项目的app目录下的build.gradle文件中添加Flutter库的依赖
dependencies {
implementation project(':flutter')
}
4.页面的跳转
public class MyFlutterActivity extends FlutterActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
}
}
这样基本上就ok了,可以运行起来测试一下看是否能跳转flutter页面
如果失败那么需要看看主app assets目录下有没有flutter_assets这个文件夹,如果没有可能是权限问题,无法复制flutter_module的这个文件到主目录下
可以去flutter_module目录下找flutter_assets并复制到app assets目录下
还有一种失败可能是ABI设置问题
ndk {
// 设置支持的 SO 库构架
abiFilters 'armeabi', 'armeabi-v7a' , 'x86'
}
Flutter返回Native
MyFlutterActivity增加Plugin监听
public class MyFlutterActivity extends FlutterActivity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
new MethodChannel(getFlutterView(), "f.route/plugin")
.setMethodCallHandler((methodCall, result) -> {
//判断call返回参数,跳转相应逻辑
switch (methodCall.method){
case "finish": {
finish();
result.success("200");
break;
}
default:result.notImplemented();
}
});
GeneratedPluginRegistrant.registerWith(this);
}
}
Flutter页面增加跳转
最简单不带参数的跳转
const routePlugin =const MethodChannel("f.route/plugin");
Future<Null> _onRouteFinish() async {
String result =await routePlugin.invokeMethod("finish");
}
Flutter页面增加按钮并设置调用方法
FlatButton(
child: Image(image: AssetImage("images/icon_back.png"),
width: 16,
height: 16,
),
onPressed: _onRouteFinish,
)
这样基本上就成功了。
Android项目与Flutter混合开发(Release)
release真的有点麻烦,搞得有点头秃
如果按照下面的流程走如果最后还是报错那么请不要怀疑,赶紧联系我QQ:812405389
第一步 检查、整理
删除assets下flutter_assets文件夹
这个主要是因为Debug和Release的方式是不同的,Debug下面会有kernel_blob.bin这个文件,而release这个文件会被isolate_snapshot_instr和vm_snapshot_instr代替。
详细的不同可以查看flutter_module/.android/Flutter/build/intermediates/flutter
下面会有debug/release两个不同的文件夹,只要run/bulid 就会生成
检查APP支持的SO库架构
abiFilters 'armeabi', 'armeabi-v7a'
如果只对armeabi-v7a支持那么就不需要管了,如果有对其他的架构支持那么就需要注意一会要复制的so包
下面这个检查可做可不做,我也是因为包有冲突才会修改
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创建的时候会自动添加v13的包,这个包和我已有的supportv4包版本有冲突,所以我屏蔽了原来的v13增加了v4 26+的版本,如果你的项目在加入了flutter可以正常运行那么这里可以不需要修改。
Rebuild Project
第二步 复制关键文件
执行flutter build apk 成功会生成apk包,这时去flutter_module/.android/Flutter/build/intermediates/flutter/release 文件加下复制
把选中的文件复制到 app assets文件夹下
第三步 复制so包
这一步非常重要,如果引入错误那么就会在打开flutter页面的时候就会报错,如果出现提示ABI或者VM之类的错误,那么就很有可能是这一步出现了问题。
flutter会在armeabi-v7a自动加入libflutter.so这个文件,而其他的架构下就没有,所以要复制libflutter.so到其他架构下。
flutter_root/bin/cache/artifacts/engine
这个文件夹下面会有flutter.jar这个jar包,解压后找到libflutter.so文件复制到armeabi文件夹下,如果你需要支持其他的架构那么就从其他的release文件夹下需要so包。
然后重新Rebuild Project
第四步 安装
这里有两种方式
1.apk
apk的方式就是打一个正式包出来然后安装到手机上就可以,如果上述步骤没有问题的话那么应该可以正确显示flutter页面,并且跳转页面的时候也不会黑屏白屏
2.run
在android studio右下角找到Build Variants选项卡,如果的项目没有做特殊的配置的话默认应该是debug,点击app右边的debug选择release然后run app就可以了,效果和apk方式一样。
这样基本上就完成了Android项目与Flutter混合开发的Demo