ios原生嵌套Flutter模塊

一.創(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)境。

  1. 修改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
  1. 執(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

基本元素

自定義的頁面
基本功能學習
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容