一、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,进入对应目录删除
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.创建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.xcconfig
、Release.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.framework
、Flutter.framework
、flutter_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.framework
:dart
业务源码相关文件,在Debug
模式下就是一个很小的空壳,在Release
模式下包含全部业务逻辑。
flutter_assets
:Flutter
依赖的静态资源,如字体,图片等。
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
按上文重新设置一下
AppDelegate
和需要使用Flutter
的ViewController
即可
demo地址