Flutter(七)：Flutter混合开发--接入现有原生工程(iOS+Android)

在上一篇文章Flutter(六)：Flutter_Boost接入现有原生工程(iOS+Android)中介绍了Flutter_Boost的接入方法，这一篇将介绍Flutter自带的接入方法。

新建工程

1.新建工程

• 1.使用Xcode新建flutter_demo_ios（模拟已有工程）
• 2.使用AndroidStudio新建flutter_demo_android（模拟已有工程）
• 3.使用AndroidStudio新建flutter_demo_flutter（新的flutter库工程）

创建过程可以参考上一篇文章Flutter(六)：Flutter_Boost接入现有原生工程(iOS+Android)，这里就不再展开了。

备注：

1.AndroidSudio需要安装Dart和Flutter插件

2.flutter工程新建时选择Module

2.新建完成

目录结构如下：

Android接入

1.setting.gradle新增

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_demo_library/.android/include_flutter.groovy'
))

2.app下的build.gradle增加依赖

implementation project(':flutter')

然后执行gradle sync

3.跳转代码

在AndroidManifest.xml文件中的application标签中增加:

<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"
  />

跳转代码

startActivity(FlutterActivity.createDefaultIntent(currentActivity))

iOS接入

1.修改pod文件

flutter_application_path = '../flutter_demo_library'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'flutter_demo_ios' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for flutter_demo_ios
  install_all_flutter_pods(flutter_application_path)

end

post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

执行pod install，podhelper.rb 脚本会把你的 plugins， Flutter.framework，和 App.framework 集成到你的项目中。

2.修改AppDelegate

import UIKit
import Flutter
import FlutterPluginRegistrant

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {

    lazy var flutterEngine = FlutterEngine(name: "my flutter engine")

    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        flutterEngine.run()
        GeneratedPluginRegistrant.register(with: self.flutterEngine)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

}

3.修改ViewController中的跳转代码

let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
self.navigationController?.pushViewController(flutterViewController, animated: true)

ViewController记得还需要import Flutter，至此iOS接入完毕，使用模拟器也可以正常执行。

问题集锦

Android

1、Caused by: org.gradle.api.InvalidUserCodeException: Build was configured to prefer settings repositories over project repositories but repository 'maven' was added by plugin class 'FlutterPlugin'

原因：Android项目和Flutter项目的Gradle配置不一样

解决方案：

1、只是demo的话，把Flutter/.android/根目录下的setting.gradle和build.gradl拷贝到Android/根目录下，替换Android项目自带的

2、如果是老的工程，可以参考Flutter 混合开发组件化与工程化架构

2.解决Flutter 交互页面可见之前会有一个短暂的延迟

原因：每一个 FlutterActivity 默认会创建它自己的 FlutterEngine。每一个 FlutterEngine 会有一个明显的预热时间。这意味着加载一个标准的 FlutterActivity 时，在你的 Flutter 交互页面可见之前会有一个短暂的延迟。

解决方案：想要最小化这个延迟时间，你可以在抵达你的 FlutterActivity 之前，初始化一个 FlutterEngine，然后使用这个已经预热好的 FlutterEngine。

在Application加入代码:

class MyApplication : Application() {
  lateinit var flutterEngine : FlutterEngine

  override fun onCreate() {
    super.onCreate()

    // Instantiate a FlutterEngine.
    flutterEngine = FlutterEngine(this)

    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.dartExecutor.executeDartEntrypoint(
      DartExecutor.DartEntrypoint.createDefault()
    )

    // Cache the FlutterEngine to be used by FlutterActivity.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine)
  }
}

跳转代码：

startActivity(FlutterActivity
      .withCachedEngine("my_engine_id")
      .build(this))