本文主要針對現有iOS專案想接入flutter，怎麼接入flutter，如何進行專案管理，以及Native和flutter之間如何呼叫，如何除錯來講解的。
一、建立Flutter Module
執行下面的命令建立Flutter Moudle
cd some/path/
flutter create --template module my_flutter
複製程式碼some/path/是你要存放工程的目錄，然後建立flutter Module，這一步要注意，不要建立成flutter project專案了，執行命令後，控制檯會列印：
Creating project my_flutter... androidx: true
my_flutter/test/widget_test.dart (created)
my_flutter/my_flutter.iml (created)
my_flutter/.gitignore (created)
my_flutter/.metadata (created)
my_flutter/pubspec.yaml (created)
my_flutter/README.md (created)
my_flutter/lib/main.dart (created)
my_flutter/my_flutter_android.iml (created)
my_flutter/.idea/libraries/Flutter_for_Android.xml (created)
my_flutter/.idea/libraries/Dart_SDK.xml (created)
my_flutter/.idea/modules.xml (created)
my_flutter/.idea/workspace.xml (created)
Running "flutter pub get" in my_flutter... 1.8s
Wrote 12 files.
All done!
Your module code is in my_flutter/lib/main.dart.
複製程式碼建立完成以後my_flutter檔案結構如下：
my_flutter/
├── .ios/
│ ├── Runner.xcworkspace
│ └── Flutter/podhelper.rb
├── lib/
│ └── main.dart
├── test/
└── pubspec.yaml
複製程式碼接下來可以在lib中新增程式碼邏輯，在pubspec.yaml中，新增依賴的packages和plugins。
二、整合方式
1.使用CocoaPods和Flutter SDK整合
這個方案是針對高於Flutter 1.8.4-pre.21版本的SDK的混編方案，如果使用之前的SDK，請檢視Upgrading Flutter added to existing iOS Xcode project和Add Flutter to existing apps
1.1 Podfile 中新增下面配置
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
複製程式碼../my_flutter是你flutter Moudle存放的目錄，這裡my_flutter存放在profile的上一級目錄，所以這麼寫。
1.2 Podfile target 中新增install_all_flutter_pods(flutter_application_path)
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end
複製程式碼這裡的MyApp就是對應iOS專案的名稱，存放到自己專案對應target中就好了。
1.3 pod install
在Podfile所在目錄，執行pod install，如果沒問題，會在你的專案中增加以下依賴：
Installing Flutter (1.0.0)
Installing FlutterPluginRegistrant (0.0.1)
Installing my_flutter (0.0.1)
複製程式碼在執行pod install以後，如果沒有增加上面?的依賴，那麼可能是工程有問題。
問題1.Profile中路徑新增錯誤或者my_flutter是Flutter project，不是Flutter Moudle 提示錯誤如下：
[!] Invalid `Podfile` file: cannot load such file -- ./my_flutter/.ios/Flutter/podhelper.rb.
# from /Users/Example/Podfile:10
# -------------------------------------------
#
> load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
#
# -------------------------------------------
複製程式碼這時候要檢查下flutter_application_path是否正確，如果正確，檢視下my_flutter是否是Flutter project，可以檢視下my_flutter是否包含，.iOS這個檔案，注意這是一個隱藏檔案，先要在電腦中設定成顯示隱藏你檔案，再進行檢視確認，如果包含則是Moudle，不包含則是project。
問題2.專案簽名不對
在my_flutter目錄下執行如下命令：
open -a Simulator
flutter build ios
複製程式碼檢視能否正確執行，如果提示以下錯誤，則是證書問題：
It appears that your application still contains the default signing identifier.
Try replacing 'com.example' with your signing id in Xcode:
open ios/Runner.xcworkspace
Encountered error while building for device.
複製程式碼怎麼解決這個問題？
方法一：
- 1.找到my_flutter/.ios，開啟Runner.xcworkspace檔案
- 2.找到Signing & Capabilities，將Signing證書配置正確就可以了(這裡要配置Generic iOS Deveice)
方法二： 使用如下命令，忽略簽名：
flutter build ios --release --no-codesign
複製程式碼配置成功之後，再次執行flutter build ios，會列印如下資訊：
Automatically signing iOS for device deployment using specified development team in Xcode project:
56XB5ELH9A
Running Xcode build...
├─Building Dart code... 78.1s
├─Generating dSYM file... 0.1s
├─Stripping debug symbols... 0.0s
├─Assembling Flutter resources... 0.9s
└─Compiling, linking and signing... 2.9s
Xcode build done. 84.0s
Built
複製程式碼然後再次pod install應該就可以成功了。
1.4 方案優缺點
優點：
- 1.功能配置簡單，方便管理。
- 2.使用CocoaPods便於整合。
缺點：
- 1.團隊成員都必須配置flutter環境，否則編譯不過
- 2.Native程式碼和Flutter程式碼存放在一起，會變得複雜。
2.framework方式接入
2.1生成FrameWork
首先切換到my_flutter所在目錄，執行下列命令，生成framework
flutter build ios-framework --output=../Flutter/
複製程式碼命令執行成功後，會在my_flutter同一級目錄下，產生Flutter的檔案，檔案結構如下：
Flutter/
├── Debug/
│ ├── Flutter.framework
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework (only if you have plugins with iOS platform code)
│ └── example_plugin.framework (each plugin is a separate framework)
├── Profile/
│ ├── Flutter.framework
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework
└── Release/
├── Flutter.framework
├── App.framework
├── FlutterPluginRegistrant.framework
└── example_plugin.framework
複製程式碼2.2配置frameWork路徑
在專案中找到這個路徑build settings > Build Phases > Link Binary With Libraries
新增$(PROJECT_DIR)/Flutter/Release/到Framework Search Paths
2.3嵌入frameWork
在專案中找到這個路徑General > Frameworks，Libraries and Embedded Content
app.Framework和Flutter.FrameWork新增到專案中，就可以使用了。
問題1.Failed to find assets path for "flutter_assets"
Failed to find assets path for "flutter_assets"
[VERBOSE-2:engine.cc(114)] Engine run configuration was invalid.
複製程式碼如果報上面的錯誤，則在my_flutter中執行以下命令：
flutter clean
flutter build ios
複製程式碼問題2.dyld: Library not loaded: @rpath/Flutter.framework/Flutter
這個問題是說明嵌入frameWork有問題，可以檢查一下，Embed Framework和Link Binary With Libraries。
2.4 方案優缺點
優點：
- 1.團隊成員不依賴flutter環境
缺點：
- 1.打包配置，比較麻煩，都需要手動操作。
3.使用Flutter framework和CocoaPods整合(本地)
3.1生成frameWork
在Flutter v1.13.6之後版本，支援--cocoapods引數，可以使用下面命令。
flutter build ios-framework --cocoapods --output=../Flutter/
複製程式碼生成如下檔案結構：
Flutter/
├── Debug/
│ ├── Flutter.podspec
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework (each plugin with iOS platform code is a separate framework)
├── Profile/
│ ├── Flutter.podspec
│ ├── App.framework
│ ├── FlutterPluginRegistrant.framework
│ └── example_plugin.framework
└── Release/
├── Flutter.podspec
├── App.framework
├── FlutterPluginRegistrant.framework
└── example_plugin.framework
複製程式碼3.2配置profile檔案
pod 'Flutter', :podspec => '../Flutter/{build_mode}/Flutter.podspec'
複製程式碼3.3 方案優缺點
優點：
- 1.團隊成員不依賴flutter環境
- 2.可以使用cocoapods整合管理。
缺點：
- 1.Flutter版本有限制
- 2.每次需要自己打frmaework
4.使用Flutter framework和CocoaPods整合(遠端)
4.1建立一個CocoaPods私有庫
在my_flutter同級目錄下，建立CocoaPods私有庫
$ pod lib create MyFlutterFramework
複製程式碼終端執行程式碼：
xingkunkun:FlutterForFW admin$ pod lib create MyFlutterFramework
Cloning `https://github.com/CocoaPods/pod-template.git` into `MyFlutterFramework `.
Configuring MyFlutter template.
------------------------------
To get you started we need to ask a few questions, this should only take a minute.
What platform do you want to use?? [ iOS / macOS ]
> ios
What language do you want to use?? [ Swift / ObjC ]
> objc
Would you like to include a demo application with your library? [ Yes / No ]
> no
Which testing frameworks will you use? [ Specta / Kiwi / None ]
> none
Would you like to do view based testing? [ Yes / No ]
> no
What is your class prefix?
>
Running pod install on your new library.
複製程式碼4.2建立一個Flutter Module
- 1.建立Flutter Module步驟，
flutter create --template module my_flutter
複製程式碼- 2.構建framework
$ flutter build ios --debug
或者
flutter build ios --release --no-codesign（選擇不需要證書）
複製程式碼- 3.檢查.ios目錄下
- 是否有Flutter-->App.framework
- 是否有Flutter-->engine-->Flutter.framework
.ios目錄下
Flutter-->App.framework
Flutter-->engine-->Flutter.framework
複製程式碼4.3將CocoaPods私有庫整合到Native專案中
在MyFlutterFramework中建立ios_frameworks資料夾，並將App.framework和Flutter.framework拷貝進去。
在MyFlutterFramework的podspec檔案中，新增以下配置：
s.static_framework = true
arr = Array.new
arr.push('ios_frameworks/*.framework')
s.ios.vendored_frameworks = arr
複製程式碼之後在MyFlutterFramework的podfile同級目錄中執行
$ pod install
複製程式碼在MyApp工程下的podfile檔案中新增
platform :ios, '8.0'
target 'MyApp' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for MyApp
pod 'MyFlutterFramework', :path => '../MyFlutterFramework'
end
複製程式碼之後在MyApp的podfile同級目錄中執行
$ pod install
複製程式碼這時在MyApp中，就可以找到App.framework和Flutter.framework
4.4將MyFlutterFramework和my_flutter推送到遠端倉庫
- 1.MyFlutterFramework和my_flutter推送到遠端倉庫
- 2.修改MyApp工程下的podfile，將
pod 'MyFlutterFramework'依賴修改為MyFlutterFramework遠端連線。
platform :ios, '8.0'
target 'MyApp' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for MyApp
pod 'MyFlutterFramework', :git=>'https://gitlab.com/MyFlutterFramework.git'
end
複製程式碼-
- 如果MyFlutterFramework中的ios_frameworks不詳推送到遠端倉庫，可以在gitignore檔案中新增一下
# 忽略ios_frameworks中檔案
ios_frameworks
複製程式碼4.5 方案優缺點
優點：
- 1.團隊成員不依賴flutter環境
- 2.可以使用cocoapods整合管理。
- 3.可以使用遠端倉庫共享和管理專案程式碼
缺點：
- 1.每次重新構建，需要移動framework位置，比較繁瑣，可以使用指令碼解決。
三、Flutter與Native互動
Flutter 官方提供了一種 Platform Channel 的方案，用於 Dart 和平臺之間相互通訊。
核心原理：
- Flutter應用通過Platform Channel將傳遞的資料編碼成訊息的形式，跨執行緒傳送到該應用所在的宿主(Android或iOS)；
- 宿主接收到Platform Channel的訊息後，呼叫相應平臺的API，也就是原生程式語言來執行相應方法；
- 執行完成後將結果資料通過同樣方式原路返回給應用程式的Flutter部分。
Flutter提供了三種不同的Channel：
- BasicMessageChannel（主要是傳遞字串和一些半結構體的資料）
- MethodChannel（用於傳遞方法呼叫）
- EventChannel（資料流的通訊）
下面是使用Platform Channel進行通訊的示例： 示例程式碼
1.Native app主動與Flutter互動
互動主要分為三步：
- 1.flutter註冊MethodChannel
- 2.flutter MethodChannel監聽native訊息
- 3.native通過MethodChannel傳送訊息
Dart程式碼
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String title = 'Flutter to Native';
Color backGroundColor = Colors.red;
// 註冊一個通知
static const MethodChannel methodChannel = const MethodChannel('com.pages.your/native_get');
_HomePageState(){
//Native呼叫Dart方法
methodChannel.setMethodCallHandler((MethodCall call){
if(call.method == "NativeToFlutter"){
setState(() {
title = call.arguments;
backGroundColor = Colors.yellow;
});
}
return Future<dynamic>.value();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backGroundColor,
body: Center(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
child: new Text(title),
onTap: (){
_iOSPushToVC();
},
),
),
);
}
}
複製程式碼Native程式碼
#import "ViewController.h"
#import <Flutter/Flutter.h>
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
@interface ViewController ()
@property (nonatomic, strong) FlutterMethodChannel *messageChannel;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(pressOn) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"載入Flutter" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake((SCREEN_WIDTH-100)/2, 100, 100, 60);
[self.view addSubview:button];
}
- (void)pressOn
{
FlutterViewController *flutterViewController =[FlutterViewController new];
//設定路由引數
[flutterViewController setInitialRoute:@"route"];
NSString *channelName = @"com.pages.your/native_get";// 要與main.dart中一致
_messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterViewController];
[self nativeToFlutter];
[self presentViewController:flutterViewController animated:false completion:nil];
}
- (void)nativeToFlutter
{
sleep(5);
[_messageChannel invokeMethod:@"NativeToFlutter" arguments:@"NativeToFlutter"];
}
@end
複製程式碼2.Flutter主動與Native app互動
互動主要分為以下幾步：
- 1.Native建立MethodChannel。
- 2.Native新增HandleBlcok。
- 3.Flutter傳送訊息。
Dart程式碼
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String title = 'Flutter to Native';
Color backGroundColor = Colors.red;
// 註冊一個通知
static const MethodChannel methodChannel = const MethodChannel('com.pages.your/native_get');
//Dart呼叫Native方法，並接收返回值。
_iOSPushToVC() async {
title = await methodChannel.invokeMethod('FlutterToNative');
setState(() {
backGroundColor = Colors.green;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backGroundColor,
body: Center(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
child: new Text(title),
onTap: (){
_iOSPushToVC();
},
),
),
);
}
}
複製程式碼Native程式碼
#import "ViewController.h"
#import <Flutter/Flutter.h>
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
@interface ViewController ()
@property (nonatomic, strong) FlutterMethodChannel *messageChannel;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(pressOn) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"載入Flutter" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake((SCREEN_WIDTH-100)/2, 100, 100, 60);
[self.view addSubview:button];
}
- (void)pressOn
{
FlutterViewController *flutterViewController =[FlutterViewController new];
//設定路由引數
[flutterViewController setInitialRoute:@"route"];
NSString *channelName = @"com.pages.your/native_get";// 要與main.dart中一致
_messageChannel = [FlutterMethodChannel methodChannelWithName:channelName binaryMessenger:flutterViewController];
__weak typeof(self) weakSelf = self;
[_messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult _Nonnull result)
{
__strong typeof(self) strongSelf = weakSelf;
if ([call.method isEqualToString:@"FlutterToNative"]) {
if (result) {
result(@"NativeBack");
}
}
}];
[self presentViewController:flutterViewController animated:false completion:nil];
}
@end
複製程式碼四、app除錯
混合開發的時候，需要在XCode除錯程式碼，在除錯的過程中，怎麼除錯Dart程式碼呢？或者能不能使用熱載入？
1.除錯Dart程式碼
在混合開發過程中,在iOS專案中，我們如何除錯dart程式碼呢？
- 1.關閉我們的app
- 2.點選Android Studio工具欄上的Flutter Attach按鈕
- 點選之後會提示Waiting for a connection from Flutter on iPhone 11 Pro...
- 3.啟動我們的app
- 啟動app之後，會提示Syncing files to device iPhone 11 Pro...
接下來就可以像除錯普通Flutter專案一樣來除錯混合開發模式下的Dart程式碼了。
2.熱載入
- 1.關閉我們的app
- 2.在terminal中執行 flutter attach命令。
$ flutter attach
Waiting for a connection from Flutter on iPhone 11 Pro Max...
複製程式碼注意，這裡如果提示有多個裝置，如下所示：
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.
我的 iPhone • 00008030-000445611146802E • ios • iOS 13.3
iPhone 11 Pro Max • 67FCC5B2-DA5D-4EF0-8DE1-53E8F8C4CBA9 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-2 (simulator)
複製程式碼可以使用以下命令：
flutter attach -d 67FCC5B2-DA5D-4EF0-8DE1-53E8F8C4CBA9 //67FCC5B2-DA5D-4EF0-8DE1-53E8F8C4CBA9是裝置對應的id
複製程式碼- 3.啟動app，啟動之後會有如下提示,就代表成功了。
Syncing files to device iPhone 11 Pro Max...
4,196ms (!)
? To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone 11 Pro Max is available at: http://127.0.0.1:62889/T9DjblAu03w=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
複製程式碼接下來就可以在terminal除錯了：
r : 熱載入；
R : 熱重啟；
h : 獲取幫助；
d : 斷開連線；
q : 退出；
複製程式碼參考資料：
Integrate a Flutter module into your iOS project
Upgrading Flutter added to existing iOS Xcode project
Add Flutter to existing apps
flutter整合進iOS工程
閒魚flutter-boot介紹
優雅的 Flutter 元件化 混編方案
Flutter和原生iOS互動
Flutter混合開發(二)：iOS專案整合Flutter模組詳細指南
深入理解Flutter Platform Channel
Flutter混合開發二-FlutterBoost使用介紹
如何用 Flutter 實現混合開發？
深入理解Flutter的Platform Channel機制