一.創(chuàng)建Flutter module
cd 項目根目錄
flutter create --template module my_flutter
//my_flutter可以自己命名
==注：若運行flutter命令出現(xiàn)command not found: flutter==
通過以下命令解決
export PATH=`pwd`/flutter/bin:$PATH
#pwd需要根據(jù)實際路徑來
執(zhí)行完畢后，F(xiàn)lutter module將會創(chuàng)建在ios項目/my_flutter目錄下
二.將Flutter模塊嵌入到現(xiàn)有應用程序中
將Flutter模塊嵌入到現(xiàn)有iOS應用程序中有兩種方式：
- 使用CocoaPods和已安裝的Flutter SDK（推薦）胖缤。
- 為Flutter引擎，已編譯的Dart代碼和所有Flutter插件創(chuàng)建 frameworks癞季。手動嵌入 frameworks宝鼓，并在Xcode中更新現(xiàn)有應用程序的構建設置。
這里使用CocoaPods
此方法需要所有的相關開發(fā)的人員安裝 Flutter 環(huán)境声登。
- 修改iOS應用程序中 Podfile 文件，如果沒有則手動創(chuàng)建揣苏，內容如下：
flutter_application_path = 'my_flutter/' # my_flutter可根據(jù)實際目錄修改路徑
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'Native_Flutter' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
install_all_flutter_pods(flutter_application_path)
end
- 執(zhí)行pod install 命令
==注若報錯：[!] InvalidPodfilefile: No such file or directory @ rb_sysopen - ./my_flutter/.ios/Flutter/podhelper.rb.==
需要在my_flutter文件夾下執(zhí)行一下
flutter run
把.ios和.android等flutter配置生成出來悯嗓。
三.創(chuàng)建FlutterEngine 和 FlutterViewController
AppDelegate.h:
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
AppDelegate.m:
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
return YES;;
}
控制器：
#import <Flutter/Flutter.h>
//button點擊事件：跳轉到flutter頁面,默認情況下 FlutterEngine 加載 lib/main.dart 文件中的 main() 方法
- (void)handleButtonAction {
FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self presentViewController:flutterViewController animated:YES completion:nil];
}
四.跳轉到指定頁面
flutter：
注冊路由
routes: <String, WidgetBuilder>{
"MyFlutterPage": (context) => MyFlutterPage(),
});
通過全局FlutterEngine實例化FlutterViewController，并setInitialRoute設置初始化路由卸察，這里發(fā)現(xiàn)設置的初始化路由路由并不管用
控制器：
FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[flutterViewController setInitialRoute:@"MyFlutterPage"];
[self presentViewController:flutterViewController animated:YES completion:nil];
方法一：
設置FlutterViewController的pushRoute
這里其實只是讓flutter方面push一次
FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[flutterViewController pushRoute:@"MyFlutterPage"];
[self.navigationController pushViewController:flutterViewController animated:YES];
方法二：
新建一個FlutterViewController并把setInitialRoute設置為跳轉的路由脯厨，不通過全局的FlutterEngine創(chuàng)建
FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
[flutterViewController setInitialRoute:@"MyFlutterPage"];
[self.navigationController pushViewController:flutterViewController animated:YES];
但是在debug上發(fā)現(xiàn)會出現(xiàn)閃屏，親測打包后基本看不出問題
放一個之前自己學習時寫的demo坑质，希望可以幫助新入門的老鐵們合武，有好的建議可以提一下，我們一起進步洪乍，奧利給？榻取Ｋ！
https://github.com/Baffin-HSL/Flutter_UI
