在原生项目中集成Flutter
source link: https://segmentfault.com/a/1190000023897673
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
概述
使用Flutter从零开始开发App是一件轻松惬意的事情，但对于一些成熟的产品来说，完全摒弃原有App的历史沉淀，全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈，把它作为已有原生App的扩展能力，通过有序推进来提升移动终端的开发效率。
目前，想要在已有的原生App里嵌入一些Flutter页面主要有两种方案。一种是将原生工程作为Flutter工程的子工程，由Flutter进行统一管理，这种模式称为统一管理模式。另一种是将Flutter工程作为原生工程的子模块，维持原有的原生工程管理方式不变，这种模式被称为三端分离模式，如下图所示。
三端代码分离模式的原理是把Flutter模块作为原生工程的子模块，从而快速地接入Flutter模块，降低原生工程的改造成本。在Flutter 1.1x时代，在原生已有app中接入Flutter的步骤比较繁琐，具体可以可以参考： Flutter与原生混合开发
不过，从Flutter 1.20.x版本开始，Flutter对原生app接入Flutter进行了优化和升级，下面是具体介绍。
原生Android集成Flutter
支持的特性
- 在 Gradle 脚本中添加一个自动构建并引入 Flutter 模块的 Flutter SDK 钩子。
- 将 Flutter 模块构建为通用的 Android Archive (AAR) 以便集成到您自己的构建系统中，并提高 Jetifier 与 AndroidX 的互操作性；
- FlutterEngine API 用于启动并持续地为挂载 FlutterActivity 或 FlutterFragment 提供独立的 Flutter 环境；
- Android Studio 的 Android 与 Flutter 同时编辑，以及 Flutter module 创建与导入向导；
- 支持Java 和 Kotlin 为宿主的应用程序；
集成Flutter
首先，我们来看一下最终的效果，如下图所示。
集成Flutter主要有两种方式，一种是使用Android Studio工具的方式，另一种是使用手动的方式。
使用Android Studio方式
直接使用 Android Studio 是在现有应用中自动集成 Flutter 模块比较便捷的方法。在 Android Studio 打开现有的 Android 原生项目，然后依次点击菜单按钮 File > New > New Module…创建出一个可以集成的新 Flutter 模块，或者选择导入已有的 Flutter 模块，如下图所示。
选择Module的类型为Flutter Module，然后在向导窗口中填写模块名称、路径等信息，如下图所示。
此时，Android Studio 插件就会自动为这个 Android 项目配置添加 Flutter 模块作为依赖项，这时集成应用就已准备好进行下一步的构建。
手动集成
如果想要在不使用 Flutter 的 Android Studio 插件的情况下手动将 Flutter 模块与现有的 Android 应用集成，可以使用下面的步骤。
假设我们的原生应用在 some/path/MyApp 路径下，那么在Flutter 项目的同级目录下新建一个Flutter模块，命令如下。
cd some/path/ flutter create -t module --org com.example my_flutter
完成上面的命令后，会在 some/path/my_flutter/ 目录下创建一个 Flutter 模块项目。该模块项目会包含一些 Dart 代码和一些一个隐藏的子文件夹 .android/，.android 文件夹包含一个 Android 项目，该项目不仅可以帮助你通过 flutter run 运行这个 Flutter 模块的独立应用，而且还可以作为封装程序来帮助引导 Flutter 模块作为可嵌入的 Android 库。
同时，由于Flutter Android 引擎需要使用到 Java 8 中的新特性。因此，需要在宿主 Android 应用的 build.gradle 文件的 android { } 块中声明了以下源兼容性代码。
android {
//...
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
}
接下来，需要将Flutter module添加到原生Android工程的依赖中。将 Flutter 模块添加到原生Android应用程序中主要有两种方法实现。使用AAR包方式和直接使用module源码的方式。使用AAR包方式需要先将Flutter 模块打包成AAR包。假设，你的 Flutter 模块在 some/path/my_flutter 目录下，那么打包AAR包的命令如下。
cd some/path/my_flutter flutter build aar
然后，根据屏幕上的提示完成集成操作，如下图所示，当然也可以在Android原生工程中进行手动添加依赖代码。
事实上，该命令主要用于创建（默认情况下创建 debug/profile/release 所有模式）本地存储库，主要包含以下文件，如下所示。
build/host/outputs/repo
└── com
└── example
└── my_flutter
├── flutter_release
│ ├── 1.0
│ │ ├── flutter_release-1.0.aar
│ │ ├── flutter_release-1.0.aar.md5
│ │ ├── flutter_release-1.0.aar.sha1
│ │ ├── flutter_release-1.0.pom
│ │ ├── flutter_release-1.0.pom.md5
│ │ └── flutter_release-1.0.pom.sha1
│ ├── maven-metadata.xml
│ ├── maven-metadata.xml.md5
│ └── maven-metadata.xml.sha1
├── flutter_profile
│ ├── ...
└── flutter_debug
└── ...
可以发现，使用上面的命令编译的AAR包主要分为debug、profile和release三个版本，使用哪个版本的AAR需要根据原生的环境进行选择。找到AAR包，然后再Android宿主应用程序中修改 app/build.gradle 文件，使其包含本地存储库和上述依赖项，如下所示。
android {
// ...
}
repositories {
maven {
url 'some/path/my_flutter/build/host/outputs/repo'
// This is relative to the location of the build.gradle file
// if using a relative path.
}
maven {
url 'https://storage.googleapis.com/download.flutter.io'
}
}
dependencies {
// ...
debugImplementation 'com.example.flutter_module:flutter_debug:1.0'
profileImplementation 'com.example.flutter_module:flutter_profile:1.0'
releaseImplementation 'com.example.flutter_module:flutter_release:1.0'
}
当然，除了命令方式外，还可以使用Android Studio来构建AAR包。依次点击 Android Studio 菜单中的 Build > Flutter > Build AAR 即可构建Flutter 模块的 AAR包，如下图所示。
除了AAR包方式外，另一种方式就是使用源码的方式进行依赖，即将flutter_module模块作为一个模块添加到Android原生工程中。首先，将Flutter 模块作为子项目添加到宿主应用的 settings.gradle 中，如下所示。
// Include the host app project. include ':app' setBinding(new Binding([gradle: this])) evaluate(new File( settingsDir.parentFile, 'my_flutter/.android/include_flutter.groovy' ))
binding 和 evaluation 脚本可以使 Flutter 模块将其自身（如 :flutter）和该模块使用的所有 Flutter 插件（如 :package_info，:video_player 等）都包含在 settings.gradle 上下文中，然后在原生Android工程的app目录下的build.gradle文件下添加如下依赖代码。
dependencies {
implementation project(':flutter')
}
到此，在原生Android工程中集成Flutter环境就完成了，接下来编写代码即可。
添加Flutter页面
正常跳转
1， 添加FlutterActivity
Flutter提供了一个FlutterActivity来作为Flutter的容器页面，FlutterActivity和Android原生的Activity没有任何区别，可以认为它是Flutter的父容器组件，但在原生Android程序中，它就是一个普通的Activity，这个Activity必须在AndroidManifest.xml中进行注册，如下所示。
<activity android:name="io.flutter.embedding.android.FlutterActivity" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize" />
对于theme属性，我们可以使用Android的其他样式进行替换，此主题样式会决定了应用的系统样式。
2，打开FlutterActivity
在AndroidManifest.xml中注册FlutterActivity后，然后我们可以在任何地方启动这个FlutterActivity，如下所示。
myButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(
FlutterActivity.createDefaultIntent(MainActivity.this)
);
}
});
运行上面的代码，发现并不会跳转到Flutter页面，因为我们并没有提供跳转的地址。下面的示例将演示如何使用自定义路由跳转到Flutter模块页面中，如下所示。
myButton.addOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(
FlutterActivity
.withNewEngine()
.initialRoute("/my_route")
.build(currentActivity)
);
}
});
其中，my_route为Flutter模块的初始路由，关于Flutter的路由知识，可以看下面的文章： Flutter开发之路由与导航
我们使用withNewEngine()工厂方法配置，创建一个的FlutterEngine实例。当运行上面的代码时，应用就会由原生页面跳转到Flutter模块页面。
3，使用带有缓存的FlutterEngine
每个FlutterActivity在默认情况下都会创建自己的FlutterEngine，并且每个FlutterEngine在启动时都需要有一定的预热时间。这意味着在原生页面跳转到Flutter模块页面之前会一定的时间延迟。为了尽量减少这个延迟，你可以在启动Flutter页面之前先预热的FlutterEngine。即在应用程序中运行过程中找一个合理的时间实例化一个FlutterEngine，如在Application中进行初始化，如下所示。
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
flutterEngine = new FlutterEngine(this);
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartEntrypoint.createDefault()
);
FlutterEngineCache.getInstance().put("my_engine_id", flutterEngine);
}
}
其中，FlutterEngineCache的ID可以是任意的字符串，使用时请确保传递给任何使用缓存的FlutterEngine的FlutterFragment或FlutterActivity使用的是相同的ID。完成上面的自定义Application后，我们还需要在原生Android工程的AndroidManifest.xml中使用自定义的Application，如下所示。
<application
android:name="MyApplication"
android:theme="@style/AppTheme">
</application>
下面我们来看一下如何在FlutterActivity页面中使用缓存的FlutterEngine，现在使用FlutterActivity跳转到Flutter模块时需要使用上面的ID，如下所示。
myButton.addOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(
FlutterActivity
.withCachedEngine("my_engine_id")
.build(currentActivity)
);
}
});
可以发现，在使用withCachedEngine()工厂方法后，打开Flutter模块的延迟时间大大降低了。
4，使用缓存引擎的初始路由
当使用带有FlutterEngine配置的FlutterActivity或者FlutterFragment时，会有初始路由的概念，我们可以在代码中添加跳转到Flutter模块的初始路由。然而，当我们使用带有缓存的FlutterEngine时，FlutterActivity和FlutterFragment并没有提供初始路由的概念。如果开发人员希望使用带有缓存的FlutterEngine时也能自定义初始路由，那么可以在执行Dart入口点之前配置他们的缓存FlutterEngine以使用自定义初始路由，如下所示。
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
flutterEngine = new FlutterEngine(this);
flutterEngine.getNavigationChannel().setInitialRoute("your/route/here");
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartEntrypoint.createDefault()
);
FlutterEngineCache
.getInstance()
.put("my_engine_id", flutterEngine);
}
}
带有背景样式的跳转
如果要修改跳转的样式，那么可以在原生Android端自定义一个主题样式呈现一个半透明的背景。首先打开res/values/styles.xml文件，然后添加自定义的主题，如下所示。
<style name="MyTheme" parent="@style/AppTheme">
<item name="android:windowIsTranslucent">true</item>
</style>
然后，将FlutterActivity的主题改为我们自定义的主题，如下所示。
<activity android:name="io.flutter.embedding.android.FlutterActivity" android:theme="@style/MyTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize" />
然后，就可以使用透明背景启动FlutterActivity，如下所示。
// Using a new FlutterEngine.
startActivity(
FlutterActivity.withNewEngine()
.backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
.build(context)
);
// Using a cached FlutterEngine.
startActivity(
FlutterActivity.withCachedEngine("my_engine_id")
.backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
.build(context)
);
添加FlutterFragment
在Android开发中，除了Activity之外，还可以使用Fragment来加载页面，Fragment比Activity的粒度更小，有碎片化的意思。如果有碎片化加载的场景，那么可以使用FlutterFragment 。FlutterFragment允许开发者控制以下操作:
- 初始化Flutter的路由；
- Dart的初始页面的飞入样式；
- 设置不透明和半透明背景；
- FlutterFragment是否可以控制Activity；
- FlutterEngine或者带有缓存的FlutterEngine是否能使用；
1，将FlutterFragment 添加到Activity使用FlutterFragment要做的第一件事就是将其添加到宿主Activity中。为了给宿主Activity添加一个FlutterFragment，需要在Activity的onCreate()中实例化并附加一个FlutterFragment的实例，这和原生Android的Fragment使用方法是一样的，代码如下:
public class MyActivity extends FragmentActivity {
private static final String TAG_FLUTTER_FRAGMENT = "flutter_fragment";
private FlutterFragment flutterFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity_layout);
FragmentManager fragmentManager = getSupportFragmentManager();
flutterFragment = (FlutterFragment) fragmentManager
.findFragmentByTag(TAG_FLUTTER_FRAGMENT);
if (flutterFragment == null) {
flutterFragment = FlutterFragment.createDefault();
fragmentManager
.beginTransaction()
.add( R.id.fragment_container, flutterFragment, TAG_FLUTTER_FRAGMENT )
.commit();
}
}
}
其中，代码中用到的原生Fragment的布局代码如下所示。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
然后，将原生Android的启动页面改为我们的MyActivity即可。除此之外，我们还可以借助FlutterFragment来获取原生代码的生命周期，并作出相关的逻辑操作，如下所示。
public class MyActivity extends FragmentActivity {
@Override
public void onPostResume() {
super.onPostResume();
flutterFragment.onPostResume();
}
@Override
protected void onNewIntent(@NonNull Intent intent) {
flutterFragment.onNewIntent(intent);
}
@Override
public void onBackPressed() {
flutterFragment.onBackPressed();
}
@Override
public void onRequestPermissionsResult(
int requestCode,
@NonNull String[] permissions,
@NonNull int[] grantResults
) {
flutterFragment.onRequestPermissionsResult(
requestCode,
permissions,
grantResults
);
}
@Override
public void onUserLeaveHint() {
flutterFragment.onUserLeaveHint();
}
@Override
public void onTrimMemory(int level) {
super.onTrimMemory(level);
flutterFragment.onTrimMemory(level);
}
}
不过，上面的示例启动时使用了一个新的FlutterEngine，因此启动后会需要一定的初始化时间，导致应用启动后会有一个空白的UI，直到FlutterEngine初始化成功后Flutter模块的首页渲染完成。对于这种现象，我们同样可以在提前初始化FlutterEngine，即在应用程序的Application中初始化FlutterFragment，如下所示。
public class MyApplication extends Application {
FlutterEngine flutterEngine=null;
@Override
public void onCreate() {
super.onCreate();
flutterEngine = new FlutterEngine(this);
flutterEngine.getNavigationChannel().setInitialRoute("your/route/here");
flutterEngine.getDartExecutor().executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
);
FlutterEngineCache
.getInstance()
.put("my_engine_id", flutterEngine);
}
}
在上面的代码中，通过设置导航通道的初始路由，然后关联的FlutterEngine在初始执行runApp() ，在初始执行runApp()后再改变导航通道的初始路由属性是没有效果的。然后，我们修改MyFlutterFragmentActivity类的代码，并使用FlutterFragment.withNewEngine()使用缓存的FlutterEngine，如下所示。
public class MyFlutterFragmentActivity extends FragmentActivity {
private static final String TAG_FLUTTER_FRAGMENT = "flutter_fragment";
private FlutterFragment flutterFragment = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.flutter_fragment_activity);
FragmentManager fragmentManager = getSupportFragmentManager();
if (flutterFragment == null) {
flutterFragment=FlutterFragment.withNewEngine()
.initialRoute("/")
.build();
fragmentManager
.beginTransaction()
.add(R.id.fragment_container, flutterFragment,TAG_FLUTTER_FRAGMENT)
.commit();
}
}
}
控制FlutterFragment的渲染模式
FlutterFragment默认使用SurfaceView来渲染它的Flutter内容，除此之外，还可以使用TextureView来渲染界面，不过SurfaceView的性能比TextureView好得多。但是，SurfaceView不能交错在Android视图层次结构中使用。此外，在Android N之前的Android版本中，SurfaceViews不能动画化，因为它们的布局和渲染不能与其他视图层次结构同步，此时，你需要使用TextureView而不是SurfaceView，使用 TextureView来渲染FlutterFragment的代码如下。
// With a new FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
.renderMode(FlutterView.RenderMode.texture)
.build();
// With a cached FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
.renderMode(FlutterView.RenderMode.texture)
.build();
如果要给跳转添加一个转场的透明效果，要启用FlutterFragment的透明属性，可以使用下面的配置，如下所示。
// Using a new FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
.transparencyMode(TransparencyMode.transparent)
.build();
// Using a cached FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
.transparencyMode(TransparencyMode.transparent)
.build();
FlutterFragment 与Activity
有时候，一些应用使用Fragment来作为Flutter页面的承载对象时，状态栏、导航栏和屏幕方向仍然使用的是Activity，Fragment只是作为Activity的一部分。在这些应用程序中，用一个Fragment是合理的，如下图所示。 
在其他应用程序中，Fragment仅仅作为UI的一部分，此时一个FlutterFragment可能被用来实现一个抽屉的内部，一个视频播放器，或一个单一的卡片。在这些情况下，FlutterFragment不需要全屏线上，因为在同一个屏幕中还有其他UI片段，如下图所示。
FlutterFragment提供了一个概念，用来实现FlutterFragment是否能够控制它的宿主Activity。为了防止一个FlutterFragment将它的Activity暴露给Flutter插件，也为了防止Flutter控制Activity的系统UI，FlutterFragment提供了一个shouldAttachEngineToActivity()方法，如下所示。
// Using a new FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
.shouldAttachEngineToActivity(false)
.build();
// Using a cached FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
.shouldAttachEngineToActivity(false)
.build();
原生iOS集成Flutter
创建Flutter模块
为了将 Flutter 集成到原生iOS应用里，第一步要创建一个 Flutter module，创建 Flutter module的命令如下所示。
cd some/path/ flutter create --template module my_flutter
执行完上面的命令后，会在some/path/my_flutter/ 目录下创建一个Flutter module库。在这个目录中，你可以像在其它 Flutter 项目中一样，执行 flutter 命令，比如 flutter run --debug 或者 flutter build ios。打开 my_flutter 模块，可以发现，目录结构和普通 的Flutter 应用的目录别无二至，如下所示。
my_flutter/ ├── .ios/ │ ├── Runner.xcworkspace │ └── Flutter/podhelper.rb ├── lib/ │ └── main.dart ├── test/ └── pubspec.yaml
默认情况下，my_flutter的Android工程和iOS工程是隐藏的，我们可以通过显示隐藏的项目来看到Android工程和iOS工程。
集成到已有iOS应用
在原生iOS开发中，有两种方式可以将 Flutter 集成到你的既有应用中。
1， 使用 CocoaPods 依赖管理和已安装的 Flutter SDK 。（推荐）
2，把 Flutter engine 、Dart 代码和所有 Flutter plugin 编译成 framework，然后用 Xcode 手动集成到你的应用中，并更新编译设置。
1， 使用 CocoaPods 和 Flutter SDK 集成
使用此方法集成Flutter，需要在本地安装了 Flutter SDK。然后，只需要在 Xcode 中编译应用，就可以自动运行脚本来集成Dart 代码和 plugin。这个方法允许你使用 Flutter module 中的最新代码快速迭代开发，而无需在 Xcode 以外执行额外的命令。
现在假如又一个原生iOS工程，并且 Flutter module 和这个iOS工程是处在相邻目录的，如下所示。
some/path/
├── my_flutter/
│ └── .ios/
│ └── Flutter/
│ └── podhelper.rb
└── MyApp/
└── Podfile
1，如果你的应用（MyApp）还没有 Podfile，可以根据 CocoaPods 使用指南 来在项目中添加 Podfile。然后，在 Podfile 中添加下面代码：
flutter_application_path = '../my_flutter' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
2，每个需要集成 Flutter 的 [Podfile target][]，执行 install_all_flutter_pods(flutter_application_path) ，如下所示。
target 'MyApp' do install_all_flutter_pods(flutter_application_path) end
3，最后，在MyApp原生工程下运行 pod install命令拉取原生工程需要的插件。
pod install
如果没有任何错误，界面如下图。
在上面的Podfile文件中， podhelper.rb 脚本会把你的 plugins， Flutter.framework，和 App.framework 集成到你的原生iOS项目中。同时，你应用的 Debug 和 Release 编译配置，将会集成相对应的 Debug 或 Release 的 编译产物。可以增加一个 Profile 编译配置用于在 profile 模式下测试应用。然后，在 Xcode 中打开 MyApp.xcworkspace ，可以使用 【⌘B 】快捷键编译项目，并运行项目即可。
使用frameworks集成
除了上面的方法，你也可以创建一个 frameworks，手动修改既有 Xcode 项目，将他们集成进去。但是每当你在 Flutter module 中改变了代码，都必须运行 flutter build ios-framework来编译framework。下面的示例假设你想在 some/path/MyApp/Flutter/ 目录下创建 frameworks。
flutter build ios-framework --output=some/path/MyApp/Flutter/
此时的文件目录如下所示。
some/path/MyApp/
└── Flutter/
├── Debug/
│ ├── Flutter.framework
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework (only if you have plugins with iOS platform code)
│ └── example_plugin.framework (each plugin is a separate framework)
├── Profile/
│ ├── Flutter.framework
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework
└── Release/
├── Flutter.framework
├── App.framework
├── FlutterPluginRegistrant.framework
└── example_plugin.framework
然后，使用 Xcode 打开原生iOS工程，并将生成的 frameworks 集成到既有iOS应用中。例如，你可以在 some/path/MyApp/Flutter/Release/ 目录拖拽 frameworks 到你的应用 target 编译设置的 General > Frameworks, Libraries, and Embedded Content 下，然后在 Embed 下拉列表中选择 “Embed & Sign”。
1， 链接到框架
当然，你也可以将框架从 Finder 的 some/path/MyApp/Flutter/Release/ 拖到你的目标项目中，然后点击 build settings > Build Phases > Link Binary With Libraries。然后，在 target 的编译设置中的 Framework Search Paths (FRAMEWORK_SEARCH_PATHS) 增加 $(PROJECT_DIR)/Flutter/Release/，如下图所示。
2，内嵌框架
生成的动态framework框架必须嵌入你的应用才能在运行时被加载。需要说明的是插件会帮助你生成 静态或动态框架。静态框架应该直接链接而不是嵌入，如果你在应用中嵌入了静态框架，你的应用将不能发布到 App Store 并且会得到一个 Found an unexpected Mach-O header code 的 archive 错误。
你可以从应用框架组中拖拽框架（除了 FlutterPluginRegistrant 以及其他的静态框架）到你的目标 ‘ build settings > Build Phases > Embed Frameworks，然后从下拉菜单中选择 “Embed & Sign”，如下图所示。
3，使用 CocoaPods 在 Xcode 和 Flutter 框架中内嵌应用
除了使用Flutter.framework方式外，你还可以加入一个参数 --cocoapods ，然后将 Flutter 框架作为一个 CocoaPods 的 podspec 文件分发。这将会生成一个 Flutter.podspec 文件而不再生成 Flutter.framework 引擎文件，命令如下。
flutter build ios-framework --cocoapods --output=some/path/MyApp/Flutter/
执行命令后，Flutter模块的目录如下图所示。
some/path/MyApp/
└── Flutter/
├── Debug/
│ ├── Flutter.podspec
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework (each plugin with iOS platform code is a separate framework)
├── Profile/
│ ├── Flutter.podspec
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework
└── Release/
├── Flutter.podspec
├── App.framework
├── FlutterPluginRegistrant.framework
└── example_plugin.framework
然后，在iOS应用程序使用CocoaPods添加Flutter以来文件即可，如下所示。
pod 'Flutter', :podspec => 'some/path/MyApp/Flutter/[build mode]/Flutter.podspec'
添加一个Flutter页面
FlutterEngine 和 FlutterViewController
为了在原生 iOS 应用中展示 Flutter 页面，需要使用到 FlutterEngine 和 FlutterViewController 。其中，FlutterEngine 充当 Dart VM 和 Flutter 运行时环境； FlutterViewController 依附于 FlutterEngine，给 Flutter 传递 UIKit 的输入事件，并展示被 FlutterEngine 渲染的每一帧画面。
1，创建一个 FlutterEngine
创建 FlutterEngine 的时机由您自己决定。作为示例，我们将在应用启动的 app delegate 中创建一个 FlutterEngine，并作为属性暴露给外界。首先，在在 AppDelegate.h文件中添加如下代码。
@import UIKit; @import Flutter; @interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below. @property (nonatomic,strong) FlutterEngine *flutterEngine; @end
然后，在 AppDelegate.m文件中添加如下代码。
// Used to connect plugins (only if you have plugins with iOS platform code).
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
#import "AppDelegate.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
// Runs the default Dart entrypoint with a default Flutter route.
[self.flutterEngine run];
// Used to connect plugins (only if you have plugins with iOS platform code).
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
需要说明的是，GeneratedPluginRegistrant只有在需要支持的插件才能使用。然后运行项目，结果报了一个 framework not found FlutterPluginRegistrant 错误。
ld: warning: directory not found for option '-F/Users/bilibili/Library/Developer/Xcode/DerivedData/iOSFlutterHybird-advitqdrflrsxldrjkqcsvdzxbop/Build/Products/Debug-iphonesimulator/FlutterPluginRegistrant' ld: framework not found FlutterPluginRegistrant clang: error: linker command failed with exit code 1 (use -v to see invocation)
对于这个错误，需要打开项目编译配置，修改Bitcode。默认情况下，Flutter是不支持Bitcode的，Bitcode是一种iOS编译程序的中间代码，在原生iOS工程中集成Flutter需要禁用Bitcode，如下图所示。
2，使用 FlutterEngine 展示 FlutterViewController
在下面的例子中，展示了一个普通的 ViewController，当点击页面中的UIButton时就会跳转到 FlutterViewController 的 ，这个 FlutterViewController 使用在 AppDelegate 中创建的 Flutter 引擎 (FlutterEngine)。
@import Flutter;
#import "AppDelegate.h"
#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Make a button to call the showFlutter function when pressed.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self
action:@selector(showFlutter)
forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Show Flutter!" forState:UIControlStateNormal];
button.backgroundColor = UIColor.blueColor;
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:button];
}
- (void)showFlutter {
FlutterEngine *flutterEngine =
((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
FlutterViewController *flutterViewController =
[[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];
}
@end
运行上面的代码，如果出现“symbol(s) not found for architecture x86_64”的错误，可以使用下面的步骤进行解决。使用Xcode打开项目，然后依次选择TARGETS->Build Phases，然后找到Compile Sources 并点击“+”， 在搜索框输入APPDelegate 找到他的.m文件。
3，使用隐式 FlutterEngine 创建 FlutterViewController
我们可以让 FlutterViewController 隐式的创建 FlutterEngine，而不用提前初始化一个FlutterEngine。不过不建议这样做，因为按需创建FlutterEngine 的话，在 FlutterViewController 被 present 出来之后，第一帧图像渲染完之前，将会有明显的延迟。不过，当 Flutter 页面很少被展示时，可以使用此方式。
为了不使用已经存在的 FlutterEngine 来展现 FlutterViewController，省略 FlutterEngine 的创建步骤，并且在创建 FlutterViewController 时，去掉 FlutterEngine 的引用。
// Existing code omitted.
// 省略已经存在的代码
- (void)showFlutter {
FlutterViewController *flutterViewController =
[[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];
}
@end
使用 FlutterAppDelegate
FlutterAppDelegate 具备如下功能：
- 传递应用的回调，例如 openURL 到 Flutter 的插件 —— local_auth。
- 传递状态栏点击（这只能在 AppDelegate 中检测）到 Flutter 的点击置顶行为。
我们推荐应用的UIApplicationDelegate 继承 FlutterAppDelegate，但不是必须的，如果你的 App Delegate 不能直接继承 FlutterAppDelegate，那么让你的 App Delegate 实现 FlutterAppLifeCycleProvider 协议，来确保 Flutter plugins 接收到必要的回调。否则，依赖这些事件的 plugins 将会有无法预估的行为。
@import Flutter; @import UIKit; @import FlutterPluginRegistrant; @interface AppDelegate : UIResponder <UIApplicationDelegate, FlutterAppLifeCycleProvider> @property (strong, nonatomic) UIWindow *window; @property (nonatomic,strong) FlutterEngine *flutterEngine; @end
然后，在具体实现中，将App Delegate委托给 FlutterPluginAppLifeCycleDelegate，如下所示。
@interface AppDelegate ()
@property (nonatomic, strong) FlutterPluginAppLifeCycleDelegate* lifeCycleDelegate;
@end
@implementation AppDelegate
- (instancetype)init {
if (self = [super init]) {
_lifeCycleDelegate = [[FlutterPluginAppLifeCycleDelegate alloc] init];
}
return self;
}
- (BOOL)application:(UIApplication*)application
didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id>*))launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return [_lifeCycleDelegate application:application didFinishLaunchingWithOptions:launchOptions];
}
// Returns the key window's rootViewController, if it's a FlutterViewController.
// Otherwise, returns nil.
- (FlutterViewController*)rootFlutterViewController {
UIViewController* viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
if ([viewController isKindOfClass:[FlutterViewController class]]) {
return (FlutterViewController*)viewController;
}
return nil;
}
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
[super touchesBegan:touches withEvent:event];
// Pass status bar taps to key window Flutter rootViewController.
if (self.rootFlutterViewController != nil) {
[self.rootFlutterViewController handleStatusBarTouches:event];
}
}
- (void)application:(UIApplication*)application
didRegisterUserNotificationSettings:(UIUserNotificationSettings*)notificationSettings {
[_lifeCycleDelegate application:application
didRegisterUserNotificationSettings:notificationSettings];
}
- (void)application:(UIApplication*)application
didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken {
[_lifeCycleDelegate application:application
didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
- (void)application:(UIApplication*)application
didReceiveRemoteNotification:(NSDictionary*)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
[_lifeCycleDelegate application:application
didReceiveRemoteNotification:userInfo
fetchCompletionHandler:completionHandler];
}
- (BOOL)application:(UIApplication*)application
openURL:(NSURL*)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey, id>*)options {
return [_lifeCycleDelegate application:application openURL:url options:options];
}
- (BOOL)application:(UIApplication*)application handleOpenURL:(NSURL*)url {
return [_lifeCycleDelegate application:application handleOpenURL:url];
}
- (BOOL)application:(UIApplication*)application
openURL:(NSURL*)url
sourceApplication:(NSString*)sourceApplication
annotation:(id)annotation {
return [_lifeCycleDelegate application:application
openURL:url
sourceApplication:sourceApplication
annotation:annotation];
}
- (void)application:(UIApplication*)application
performActionForShortcutItem:(UIApplicationShortcutItem*)shortcutItem
completionHandler:(void (^)(BOOL succeeded))completionHandler NS_AVAILABLE_IOS(9_0) {
[_lifeCycleDelegate application:application
performActionForShortcutItem:shortcutItem
completionHandler:completionHandler];
}
- (void)application:(UIApplication*)application
handleEventsForBackgroundURLSession:(nonnull NSString*)identifier
completionHandler:(nonnull void (^)(void))completionHandler {
[_lifeCycleDelegate application:application
handleEventsForBackgroundURLSession:identifier
completionHandler:completionHandler];
}
- (void)application:(UIApplication*)application
performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
[_lifeCycleDelegate application:application performFetchWithCompletionHandler:completionHandler];
}
- (void)addApplicationLifeCycleDelegate:(NSObject<FlutterPlugin>*)delegate {
[_lifeCycleDelegate addDelegate:delegate];
}
@end
启动选项
上面例子使用默认配置来启动 Flutter，为了定制化你的 Flutter 运行时，我们可以指定 Dart 入口、库和路由。
1，指定Dart 入口
在 FlutterEngine 上调用 run()函数，默认将会调用你的 lib/main.dart 文件里的 main() 函数。不过，我们可以使用入口方法 runWithEntrypoint() 来指定一个Dart 入口，并且，使用 main() 以外的 Dart 入口函数，必须使用下面的注解，防止被 tree-shaken 优化掉，而没有进行编译。如下所示。
@pragma('vm:entry-point')
void myOtherEntrypoint() { ... };
2，指定Dart 库
同时，Flutter允许开发者在指定 Dart 函数时指定特定文件。例如使用 lib/other_file.dart 文件的 myOtherEntrypoint() 函数取代 lib/main.dart 的 main() 函数，如下所示。
[flutterEngine runWithEntrypoint:@"myOtherEntrypoint" libraryURI:@"other_file.dart"];
3，指定Dart 路由
当然，当构建Flutter Engine 时，还可以为你的 Flutter 应用设置一个初始路由，如下所示。
FlutterEngine *flutterEngine =
[[FlutterEngine alloc] initWithName:@"my flutter engine"];
[[flutterEngine navigationChannel] invokeMethod:@"setInitialRoute"
arguments:@"/onboarding"];
[flutterEngine run];
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK