一忆畅、Flutter 安裝與配置

1.搭建Flutter - iOS開發(fā)環(huán)境

• 克隆Flutter到Library目錄

sudo git clone https://github.com/flutter/flutter.git $HOME/Library/flutter

2.配置Flutter環(huán)境變量

• 為了方便后續(xù)使用站宗，需要將項目根目錄下bin路徑加入環(huán)境變量PATH中
  *執(zhí)行命令open ~/.bash_profile在底部添加環(huán)境變量护赊。

# Flutter 相關(guān)配置
export PATH=$HOME/Library/flutter/bin:$PATH
export FLUTTER_ROOT=$HOME/Library/flutter

// 國內(nèi)臨時鏡像地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

• 然后生效環(huán)境變量，終端 執(zhí)行 source ~/.bash_profile
• 驗證flutter/bin目錄是否在你的PATH中

# 執(zhí)行下面命令
echo $PATH

• 如果安裝成功, 會輸出類似/xxx/flutter/bin:的路徑

3.環(huán)境配置檢測

• 在進行配置前, 首先需要安裝CocoaPods
• 安裝CocoaPods后, 在執(zhí)行sudo flutter doctor命令, 可能會出現(xiàn)如下問題

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel master, v1.2.1-pre.197, on Mac OS X 10.14.3 18D109, locale
    zh-Hans)
[?] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ? Verify that all connected devices have been paired with this computer in
      Xcode.
      If all devices have been paired, libimobiledevice and ideviceinstaller may
      require updating.
      To update with Brew, run:
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ? CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[?] Android Studio (version 3.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

• 此時在終端中依次執(zhí)行出現(xiàn)的命令即可

        [!] iOS toolchain - develop for iOS devices
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller

• 配置完后，此刻再運行flutter doctor命令

如果重復(fù)提示 iOS toolchain - develop for iOS devices鳖孤，進入對應(yīng)目錄刪除libimobiledevice习瑰、usbmuxd和ideviceinstaller庫绪颖，重啟電腦即可

Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.3 18D109, locale
    zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[?] iOS toolchain - develop for iOS devices (Xcode 10.1)
[?] Android Studio (version 3.2)
[?] Connected device (1 available)

? No issues found!

二、已有項目集成Flutter

1.創(chuàng)建Flutter應(yīng)用

• 首先cd到flutter工程同級目錄甜奄，執(zhí)行flutter命令

flutter create -t module flutter_module

2.創(chuàng)建iOS的銜接文件

• 打開iOS工程柠横，在Xcod中點擊Flie->New->Flie添加Configuration Settings File文件，命名為FlutterConfig.xcconfig
  

注意添加的路徑為FlutterDemo/flutter_module课兄，添加完成后牍氛，此時Xcode工程目錄下會多一個FlutterConfig.xcconfig文件引用，可刪除此引用

• 給Flutte添加xcconfig文件引用烟阐，在FlutterConfig.xcconfig里添加 #include "./.ios/Flutter/Generated.xcconfig"引用flutter_module下的ios插件里的Generated.xcconfig文件
• 給iOS工程添加文件引用搬俊，創(chuàng)建Debug.xcconfig、Release.xcconfig蜒茄，然后將對應(yīng)的xcconfig添加到iOS項目的Info-Configuration里唉擂。代碼如下

// FlutterConfig.xcconfig
#include "./.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO

// Debug.xcconfig
#include "../.././flutter_module/FlutterConfig.xcconfig"

//  Release.xcconfig
#include "../.././flutter_module/FlutterConfig.xcconfig"
FLUTTER_BUILD_MODE=release

3.引入xcode-backend.sh

• 在iOS工程里添加運行 Flutter 的腳本，并且確保Run Script這一行在 Target dependencies 或者 Check Pods Manifest.lock后面
  

判斷腳本路徑是否正確檀葛，可以執(zhí)行指令open $FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh

4.引入Flutter編譯產(chǎn)物

• 編譯完項目玩祟，把flutter_module/.ios/Flutter下的App.framework、Flutter.framework屿聋、flutter_assets添加進項目空扎，確保文件夾下的兩個framework添加到Embeded Binaries
  里

注意：flutter_assets 并不能使用Create groups 的方式添加，只能使用 Creat folder references的方式添加進Xcode項目內(nèi)

5.iOS工程改造

• AppDelegate.swift改造

import Flutter

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {

   var flutterEngine : FlutterEngine?
    
    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil)
        self.flutterEngine?.run(withEntrypoint: nil)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

• 進入flutter頁面

//
//  ViewController.swift
//  EZBuy-flutter
//
//  Created by qiuming on 2019/2/15.
//  Copyright ? 2019 qiuming. All rights reserved.
//

import UIKit
import Flutter

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func handleButtonAction(_ sender: UIButton) {
        let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;
        self.present(flutterViewController, animated: false, completion: nil)
    }
}

三润讥、cocoapods集成

對于手動集成转锈，其實發(fā)現(xiàn)只需要集成Flutter 核心編譯產(chǎn)物，項目就能接入Flutter 的功能象对。
App.framework：dart業(yè)務(wù)源碼相關(guān)文件黑忱，在 Debug 模式下就是一個很小的空殼，在 Release 模式下包含全部業(yè)務(wù)邏輯。
flutter_assets：Flutter依賴的靜態(tài)資源甫煞，如字體菇曲，圖片等。
Flutter.framework：Flutter庫和引擎抚吠。

• podspec制作常潮，校驗通過后上傳至cocoapods

#
#  Be sure to run `pod spec lint EZFlutterSDK.podspec' to ensure this is a
#  valid spec and to remove all comments including this before submitting the spec.
#
#  To learn more about Podspec attributes see https://docs.cocoapods.org/specification.html
#  To see working Podspecs in the CocoaPods repo see https://github.com/CocoaPods/Specs/
#

Pod::Spec.new do |spec|

  spec.name         = "EZFlutterSDK"
  spec.version      = "0.0.1"
  spec.summary      = "Flutter編譯后的文件"
  spec.homepage     = "https://github.com/wutongyu008/FlutterSDK"
  spec.license      = { :type => "MIT", :file => "LICENSE" }
  spec.author       = { "wutongyu008" => "wutongyu_08@163.com" }
  spec.platform     = :ios, "9.0"
  spec.source       = { :git => "https://github.com/wutongyu008/FlutterSDK.git", :tag => "#{spec.version}" }

  spec.vendored_frameworks = "Framework/*.framework", "Framework/engine/*.framework"
  spec.resources = "Framework/flutter_assets"

end

• 私有庫制作好后，在Podfile中使用私有庫

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'Flutter-IOS' do
  use_frameworks!

  pod 'EZFlutterSDK', '~> 0.0.1'

  target 'Flutter-IOSTests' do
    inherit! :search_paths
  end

end

按上文重新設(shè)置一下AppDelegate和需要使用Flutter的ViewController即可
demo地址