一奢赂、Flutter 安裝 『中文網』

• 終端執(zhí)行

  flutter doctor -v
  

• 如果安裝成功會有如下打悠埂：

  OwohAnserdeiMac:Supermakup_Swift pet$ flutter doctor
  Doctor summary (to see all details, run flutter doctor -v):
  [?] Flutter (Channel stable, v1.17.1, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN)
  
  [?] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
  [?] Xcode - develop for iOS and macOS (Xcode 11.3)
  [?] Android Studio (version 3.6)
  [?] VS Code (version 1.47.3)
  [?] Connected device (1 available)
  
  ? No issues found!
  

二、在iOS項目中集成Flutter SDK

• 1民轴、iOS工程的Enable BitCode需要設置為NO攻柠，因為Flutter 混合開發(fā)不支持。

• 2后裸、創(chuàng)建 flutter module:

  • cd 到項目文件的同級目錄下瑰钮；
  • 執(zhí)行命令：(flutter_module: 文件名稱，可自定義)

    flutter create -t module flutter_module
    

  • 如果輸出如下錯誤：

    Got socket error trying to find package cupertino_icons at https://pub.dartlang.org.
    

  • 可執(zhí)行以下命令解決：

    /// 配置鏡像
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

  • 若輸出如下微驶，表示成功浪谴，可在項目文件的同級目錄看到新生成的文件（flutter_module）：

    OwohAnserdeiMac:Supermakup_Swift pet$ flutter create -t module myfluttermodule
    Creating project myfluttermodule...
    myfluttermodule/test/widget_test.dart (created)
    myfluttermodule/myfluttermodule.iml (created)
    myfluttermodule/.gitignore (created)
    myfluttermodule/.metadata (created)
    myfluttermodule/pubspec.yaml (created)
    myfluttermodule/README.md (created)
    myfluttermodule/lib/main.dart (created)
    myfluttermodule/myfluttermodule_android.iml (created)
    myfluttermodule/.idea/libraries/Flutter_for_Android.xml (created)
    myfluttermodule/.idea/libraries/Dart_SDK.xml (created)
    myfluttermodule/.idea/modules.xml (created)
    myfluttermodule/.idea/workspace.xml (created)
    Running "flutter pub get" in myfluttermodule...                     1.0s
    Wrote 12 files.
    
    All done!
    Your module code is in myfluttermodule/lib/main.dart.
    

• 3、通過cocoapods添加依賴

  • 在項目的Podfile文件中添加如下代碼：

    #其中flutter_application_path為flutter模塊相對于podfile文件的位置因苹。
    flutter_application_path = './../flutter_module/'
    eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
    

  • 更新pods

    pod install
    

• 4苟耻、添加腳本

  Xcode -> Target -> Build Phase -> New Run Script Phase;

  "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
  "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
  

• 5、編譯項目

  • 編譯成功扶檐，執(zhí)行腳本后會在項目的根目錄中生成一個Flutter文件凶杖，里面包含：

    Flutter.framework
    Flutter.podspec
    

  • 編譯失敗
    • 如果報如下錯誤：

      /bin/sh: /packages/flutter_tools/bin/xcode_backend.sh: No such file or directory
      

    • 需指定FLUTTER_ROOT路徑，在 flutter_module/.ios(隱藏文件)/Flutter/Generated.xcconfig 路徑下找到Generated.xcconfig 文件蘸秘，打開可以看到：

      FLUTTER_ROOT=/Users/pet/Desktop/Flutter/flutter
      FLUTTER_APPLICATION_PATH=/Users/pet/Desktop/超級美/Supermakup_Swift/flutter_module
      FLUTTER_TARGET=lib/main.dart
      FLUTTER_BUILD_DIR=build
      SYMROOT=${SOURCE_ROOT}/../build/ios
      OTHER_LDFLAGS=$(inherited) -framework Flutter
      FLUTTER_BUILD_NAME=1.0.0
      FLUTTER_BUILD_NUMBER=1
      

    • 在xcode中添加如下配置:
      xcode -> target -> build setting - User-Defined 中添加：

      FLUTTER_ROOT=/Users/pet/Desktop/Flutter/flutter
      FLUTTER_APPLICATION_PATH=/Users/pet/Desktop/超級美/Supermakup_Swift/flutter_module
      

• 6官卡、將Flutter添加到工程中

  • 將項目根目錄下的Flutter文件添加到工程中蝗茁，將Flutter.framework 添加到Xcode -> Target -> General -> Framewroks,Libraries,and Embeded Content 下醋虏。

• 7、引入Flutter SDK 頭文件和使用

  #import <Flutter/Flutter.h>
  

三哮翘、入過的坑：

1. 第一次加載flutter頁面顯示ios啟動圖颈嚼；

需要注意的是iOS原生跳轉flutter時，第一次跳轉會異步渲染flutter環(huán)境饭寺，因此阻课，F(xiàn)lutterViewController實例有個splashScreenView屬性叫挟，防止用戶在打開flutter頁面時會有一個中間的空檔，如果我們沒有設置此屬性限煞，iOS默認將app應用的LaunchStoryboard設置為此屬性的值抹恳，默認可能設置成功也可能設置失敗，取決于你APP的啟動圖片是否是用LaunchStoryboard來設置的署驻，所以奋献，沒有特殊情況，最好手動設置一下此屬性旺上；

let vc = CJMFlutterViewController.init()
vc.splashScreenView = {
    let view = UIView.init(frame: UIScreen.main.bounds)
    view.backgroundColor = kBackgroundColor
    return view
}()

2. FlutterViewController 內存泄露

原因出在創(chuàng)建channel時瓶蚂，造成了循環(huán)引用，導致flutterViewController不釋放宣吱∏哉猓可以新建一個控制器繼承FlutterViewController，然后重寫 didMove(toParent parent: UIViewController?) 方法

override func didMove(toParent parent: UIViewController?) {
      super.didMove(toParent: parent)
      if parent == nil {
          DispatchQueue.main.async {
              self.engine?.viewController = nil     // 必須先釋放 engine 持有的 flutterViewController征候，否則會crash
              self.engine?.destroyContext()         // 再銷毀 engine
          }
      }
  }