一.Flutter环境搭建
网上有很多教程,这里不讲。注:本文使用AS做为开发工具。
二.创建Flutter module
在和原生工程同目录下,使用命令行新建Flutter module
flutter create-t module flutter_module
三.接入FlutterBoost
3.1.使用AS打开刚才创建的工程,在pubspec.yaml中加入FlutterBoost的依赖。注意对齐格式。
flutter_boost:
git:
url: 'https://github.com/alibaba/flutter_boost.git'
ref: 'v1.12.13-hotfixes'
3.2.在当前目录命令行运行:flutter packages get
3.3.修改Flutter的main.dart代码
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter/services.dart';
const EventChannel eventChannel = const EventChannel("example.flutter.io/nativeCallFlutter");
const MethodChannel platform = const MethodChannel("example.flutter.io/flutterCallNative");
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
print('MyApp_initState');
FlutterBoost.singleton.registerPageBuilders(
"text": (pageName, params, _)=> TestPage(),
);
}
@override
Widget build(BuildContext context) {
print('MyApp_build');
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Boost example',
builder: FlutterBoost.init(postPush: _onRoutePushed),
onGenerateRoute: onGenerateRoute,
home: Container(
color: Colors.white,
));
}
void _onRoutePushed(
String pageName, String uniqueId, Map params, Route route, Future _) {
_setup(pageName, uniqueId, params, route, _);
}
void _setup(String pageName, String uniqueId, Map params, Route route,
Future _) {
}
}
至此,Flutter端的代码修改完毕,TestPage页面为为写的测试页面,使用自己的页面替换
四.ios原生端接入
4.1.依赖设置
在原生的工程目录下新建Flutter文件夹,用来存放Flutter相关的文件
使用xcode在Flutter目录下新建三个配置文件:Flutter.xcconfig、Debug.xcconfig、Release.xcconfig。在Project的configurations下将Debug.xcconfig、Release.xcconfig分别加入到对应的Dubug和Release模式下。
Flutter.xcconfig
#include "../../flutter_module/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO
Debug.xcconfig
#include "Flutter.xcconfig"
// 如果你是使用的pod管理你的项目,需要添加对pod的引用,XXX修改为自己项目的名称
#include "Pods/Target Support Files/Pods-XXX/Pods-XXX.debug.xcconfig"
Release.xcconfig
#include "Flutter.xcconfig"
// 如果你是使用的pod管理你的项目,需要添加对pod的引用.XXX修改为自己项目的名称
#include "Pods/Target Support Files/Pods-XXX/Pods-XXX.release.xcconfig"
FLUTTER_BUILD_MODE=release
4.2.Flutter文件引入
用AS打开iOS模拟器,运行。运行后会发现在Flutter的.ios/Flutter目录下新出现了几个文件(注:.ios为隐藏文件夹,使用command+shift+.显示)。拷贝App.framework和engine两个文件(这两个就是Flutter的产物) 至原生端刚才新建的Flutter的文件夹下。最后将这个Flutter文件拖入至原生项目中。在原生项目的General下的Framework下,将App.framework和Flutter.framework加上,注意是用动态库(Embedded)的方式加入。
4.3. pod文件修改
修改原生项目的Podfile文件
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_flutter_engine_pod
install_flutter_plugin_pods flutter_application_path
在原生项目的目录下,运行pod install命令,导入FlutterBoost
至此FlutterBoost就导入成功啦。
五.其他优化设置
5.1.脚本设置
使用以上的设置,每次修改Flutter的代码都需要重复4.2步骤,将新生成的两个文件夹替换掉,非常不方便。这里可以使用脚本来代替替换操作。
在原生项目的Bulid Phases下的Run Script下增加如下脚本。(如果没有Run Script,点旁边的+号 New Run Script Phases)。
Bulid Phases要放到Dependencies后面,尽量往后放。
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" thin
rm -rf ${SOURCE_ROOT}/Flutter/App.framework
cp -ri ../flutter_module/.ios/Flutter/App.framework ${SOURCE_ROOT}/Flutter/App.framework
rm -rf ${SOURCE_ROOT}/Flutter/engine/Flutter.framework
cp -ri ../flutter_module/.ios/Flutter/engine/Flutter.framework ${SOURCE_ROOT}/Flutter/engine/Flutter.framework
六.常见问题及解决方案
6.1.ENABLE_BITCODE的错误
①Flutter不支持BITCODE。将项目中的Bulid Settings下的enable bitcode 设置为NO。
②还是报这个错,修改Podfile文件 重新pod install
post_install do |installer|
installer.pods_project.targets.each do |target|
# Aggregate targets do not have a headers build phase.
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
end
6.2.模拟器运行报错 。
Showing Recent Messages
: "_FlutterMethodNotImplemented", referenced from:
修改Podfile文件,重新pod install
post_install do |installer|
installer.pods_project.targets.each do |target|
# Aggregate targets do not have a headers build phase.
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings['SUPPORTED_PLATFORMS'] = 'iphoneos iphonesimulator'
if config.name == "Debug" || config.name == "Debug-BD" || config.name == "Debug-TEST" || config.name == "Debug-PRE"
config.build_settings['ONLY_ACTIVE_ARCH'] = 'YES'
else
config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
end
end
end
end
6.3.打包后。上传AppStore报错
Unsupported Architectures. The executable for xxx.app/Frameworks/Flutter.framework contains unsupported architectures '[x86_64]'.
上传的Flutter.framework中包含了模拟器的支持,在Run Script下增加如下脚本删除模拟器支持。
if [[ "$CONFIGURATION" =~ "Release" ]];then
# Release环境删除Flutter.framework "x86_64" 框架
lipo -remove "x86_64" "${SOURCE_ROOT}/Flutter/engine/Flutter.framework/Flutter" -output "${SOURCE_ROOT}/Flutter/engine/Flutter.framework/Flutter"
fi
6.4.上传Appstore报错
ITMS-90338: Non-public API usage - The app references non-public symbols in Frameworks/Flutter.framework/Flutter: _ptrace。
上传的是Debug版本Flutter包。
Release.xcconfig中增加FLUTTER_BUILD_MODE=release 或者在AS的命令行输入 flutter build ios --release。打包成功后拷贝App.framework和engine两个文件(这两个就是Flutter的产物) 至原生端刚才新建的Flutter的文件夹。
6.5.Flutter页面显示空白或奔溃。
注意Flutter.framework和App.framework分别都有Dubug包和Release包。要么都用Debug包,要么都用Release包。不然会报错或者显示不出来。