在你安裝好Flutter的前提下(在macOS上搭建Flutter開發環境https://flutterchina.club/setup-macos/),為原項目添加flutter 模塊,
比如我的項目是在,/Users/haoran1/Desktop/項目/VideoListApp
在終端執行,
$ cd /Users/haoran1/Desktop/項目/VideoListApp
$ flutter create -t module my_flutter
這將創建一個名稱為my_flutter 模塊文件。
創建完成之后在項目同級目錄下會多出一個文件,其中包含一些Dart代碼以啟動,以及一個.ios / hidden子文件夾,它包含了包含一些Cocoapods和一個幫助程序Ruby腳本的模塊項目。
然后在Podfile文件里面添加如下兩行代碼:
flutter_application_path:flutter模塊的路徑
flutter_application_path = '/Users/haoran1/Desktop/項目/VideoListApp/my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
執行 pod install ,
然后添加New Run Script Phase,
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
然后去AppDelegate.h 里面,#import <Flutter/Flutter.h>,讓AppDelegate繼承于FlutterAppDelegate,在m文件里面,修改didFinishLaunchingWithOptions,添加 [GeneratedPluginRegistrant registerWithRegistry:self];
現在已經可以 跳轉Flutter 界面啦,
flutter支持熱重載,修改代碼后能立馬看到效果。
終端執行
$ cd /Users/haoran1/Desktop/項目/VideoListApp/my_flutter
$ flutter attach
看到正在等待模擬器啟動,監聽flutter,然后使用Xcode 啟動原生項目,跳轉flutter界面,
原生界面:
點擊按鈕跳轉flutter頁面:
可以看到 已經跳轉成功了,終端監聽到flutter頁面,
flutter帶有熱重載功能,修改代碼,不重新運行可以直接看到修改后的界面,可以按r來刷新界面,在main.dart內添加一行文字:(main.dart文件在my_flutter/lib里面,使用VSCode或者Android studio打開,如果想要語法聯想需要安裝Flutter插件)
在跳轉flutter頁面時,可以通過設置 InitialRoute來展示不通的widget。
在main.dart內,通過routename進行判斷,
一個月前接觸到flutter,然后使用flutter一邊學習一邊重寫了之前的公司小項目,感覺開發是真的好快,感覺比之前開發時間提快好多,并且是iOS/Android雙平臺的,頁面流暢度也堪比原生(release),畢竟是google爸爸出的,閑魚有多個頁面已經使用flutter。個人感覺比RN入門快,RN基于js橋接,Flutter是自繪UI,真正的一套代碼運行雙端,另外flutter還可以開發桌面應用(https://github.com/google/flutter-desktop-embedding)(https://feather-apps.com/),另外google新的操作系統Fuchsia也可以使用flutter開發。
這是小項目的下載地址,可以下載體驗一下(安卓版):pgyer.com/mBHn