构建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包
下面这个检查可做可不做，我也是因为包有冲突才会修改
image.png
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 文件加下复制
image.png
把选中的文件复制到 app assets文件夹下
image.png
第三步 复制so包
这一步非常重要，如果引入错误那么就会在打开flutter页面的时候就会报错，如果出现提示ABI或者VM之类的错误，那么就很有可能是这一步出现了问题。
flutter会在armeabi-v7a自动加入libflutter.so这个文件，而其他的架构下就没有，所以要复制libflutter.so到其他架构下。
flutter_root/bin/cache/artifacts/engine
image.png
这个文件夹下面会有flutter.jar这个jar包，解压后找到libflutter.so文件复制到armeabi文件夹下，如果你需要支持其他的架构那么就从其他的release文件夹下需要so包。
然后重新Rebuild Project
第四步 安装
这里有两种方式
1.apk
apk的方式就是打一个正式包出来然后安装到手机上就可以，如果上述步骤没有问题的话那么应该可以正确显示flutter页面，并且跳转页面的时候也不会黑屏白屏
2.run
image.png
在android studio右下角找到Build Variants选项卡，如果的项目没有做特殊的配置的话默认应该是debug，点击app右边的debug选择release然后run app就可以了，效果和apk方式一样。
这样基本上就完成了Android项目与Flutter混合开发的Demo
