Flutter 开发集成

一、Flutter 安装与配置

1.搭建Flutter - iOS开发环境

  • 克隆Flutter到Library目录
sudo git clone https://github.com/flutter/flutter.git $HOME/Library/flutter

2.配置Flutter环境变量

  • 为了方便后续使用,需要将项目根目录下bin路径加入环境变量PATH
    *执行命令open ~/.bash_profile在底部添加环境变量。
# Flutter 相关配置
export PATH=$HOME/Library/flutter/bin:$PATH
export FLUTTER_ROOT=$HOME/Library/flutter

// 国内临时镜像地址
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  • 然后生效环境变量,终端 执行 source ~/.bash_profile
  • 验证flutter/bin目录是否在你的PATH
# 执行下面命令
echo $PATH
  • 如果安装成功, 会输出类似/xxx/flutter/bin:的路径

3.环境配置检测

  • 在进行配置前, 首先需要安装CocoaPods
  • 安装CocoaPods后, 在执行sudo flutter doctor命令, 可能会出现如下问题
$ 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.
  • 此时在终端中依次执行出现的命令即可
        [!] 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命令

如果重复提示 iOS toolchain - develop for iOS devices,进入对应目录删除libimobiledeviceusbmuxdideviceinstaller库,重启电脑即可

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.创建Flutter应用

  • 首先cd到flutter工程同级目录,执行flutter命令
flutter create -t module flutter_module

2.创建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工程添加文件引用,创建Debug.xcconfigRelease.xcconfig,然后将对应的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后面

判断脚本路径是否正确,可以执行指令open $FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh

4.引入Flutter编译产物

  • 编译完项目,把flutter_module/.ios/Flutter下的App.frameworkFlutter.frameworkflutter_assets添加进项目,确保文件夹下的两个framework添加到Embeded Binaries

注意:flutter_assets 并不能使用Create groups 的方式添加,只能使用 Creat folder references的方式添加进Xcode项目内

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集成

对于手动集成,其实发现只需要集成Flutter 核心编译产物,项目就能接入Flutter 的功能。
App.frameworkdart业务源码相关文件,在 Debug 模式下就是一个很小的空壳,在 Release 模式下包含全部业务逻辑。
flutter_assetsFlutter依赖的静态资源,如字体,图片等。
Flutter.frameworkFlutter库和引擎。

  • 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

按上文重新设置一下AppDelegate和需要使用FlutterViewController即可
demo地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容