原生應用新增 Flutter 模組依賴

傅誠發表於2021-04-08
Flutter

Flutter 可以作為一個庫或模組，整合進現有的應用當中。

  • Android 應用中，Flutter 可以作為 AAR 嵌入。
  • IOS 應用中，Flutter 可以以 framework 框架的形式進行新增。

Android 整合 Flutter AAR

生成 aar

在flutter 專案中，通過如下命令，生成 aar

  flutter build aar
複製程式碼

將 aar 新增到原生android 專案

將 flutter_im.aar 複製到 android 專案下 app/libs

注：flutter_im.aar為生成的 aar，可以根據需要命名。這裡命名為 flutter_im

image-20210109150023893

app build.grade配置

 defaultConfig {
        ndk {
            // 過濾Flutter支援的架構。
            abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
        }
}


repositories {
    flatDir {
    dirs 'libs'   // aar目錄
  }
}

//新增如下：
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation(name: 'flutter_im', ext: 'aar')
    
    //版本號，在生成 aar 的 flutter 專案的 build 中可以檢視
    def flutterVersion = '1.0.0-ae90085a8437c0ae94d6b5ad2741739ebc742cb4'
    implementation "io.flutter:flutter_embedding_release:$flutterVersion"
    implementation "io.flutter:armeabi_v7a_release:$flutterVersion"
    implementation "io.flutter:arm64_v8a_release:$flutterVersion"
    implementation "io.flutter:x86_64_release:$flutterVersion"
}
複製程式碼

外層build.grade配置

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "https://storage.flutter-io.cn/download.flutter.io"
        }
    }
}
複製程式碼

在清單檔案中加入 FlutterActivity

 <activity
            android:name="io.flutter.embedding.android.FlutterActivity"
      			android:configChanges="orientation|keyboardHidden|keyboard|screenSize
                           |locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize" />
複製程式碼

啟動頁面， 注意導包 io.flutter.embedding.android

// 直接啟動 
startActivity(FlutterActivity.createDefaultIntent(this))
複製程式碼

使用快取的 FlutterEngine，加快 flutter 頁面的啟動

// 1. Application 類中預先初始化一個 FlutterEngine
class MyApplication : Application() {
    lateinit var flutterEngine : FlutterEngine

    override fun onCreate() {
        super.onCreate()

        // 例項化FlutterEngine。
        flutterEngine = FlutterEngine(this)

        // 開始執行Dart程式碼,以初始化FlutterEngine。
        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint.createDefault()
        )

        // 快取FlutterActivity要使用的FlutterEngine。
        FlutterEngineCache
            .getInstance()
            .put("hgg_im", flutterEngine)
    }
}

// 使用快取的 FlutterEngine 啟動
   startActivity(
                FlutterActivity
                    .withCachedEngine("hgg_im")
                    .build(this)
            )
複製程式碼

Ios 整合 Flutter Frameworks

生成 frameworks

在flutter 專案中，執行如下命令

  flutter build ios-framework --xcframework --no-universal
複製程式碼

生成 App.xcframework 和 Flutter.xcframework

將 frameworks 新增到 Ios 專案

拖拽 frameworks 到你的應用 target編譯設定的

General > Frameworks, Libraries, and Embedded Content 下，

然後在 Embed 下拉選單中選擇 “Embed & Sign”。

初始化flutterEngine

import UIKit
import Flutter

@main
class AppDelegate: FlutterAppDelegate {
    lazy var flutterEngine = FlutterEngine(name: "hgg_im")

    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            flutterEngine.run();
            return super.application(application, didFinishLaunchingWithOptions: launchOptions);
    }
}
複製程式碼

啟動頁面

 let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
 let flutterViewController =
         FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
 //flutterViewController.modalPresentationStyle = UIModalPresentationStyle.fullScreen;
 present(flutterViewController, animated: true, completion: nil)
複製程式碼

相關文章