今年google發(fā)布了Flutter 1.0版,并且咸魚已經(jīng)對(duì)Flutter進(jìn)行了應(yīng)用,所以自己最近研究了一下Flutter,講解一下自己搭建過程
由于windows并不支持iOS的開發(fā)環(huán)境安裝,所以目前只是針對(duì)Mac 系統(tǒng)進(jìn)行安裝(注意在環(huán)境搭建的過程中需要VPN,繞開那個(gè)大家都懂的東西)
鏡像
Flutter官方為中國開發(fā)者搭建的臨時(shí)鏡像,可以將如下環(huán)境變量加入到環(huán)境變量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Linux用戶組也提供了鏡像站點(diǎn),可以將如下環(huán)境變量加入到環(huán)境變量中:
export PUB_HOSTED_URL=https://mirrors.sjtug.sjtu.edu.cn/
export FLUTTER_STORAGE_BASE_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
具體環(huán)境變量設(shè)置步驟如下:
1.打開或創(chuàng)建$HOME/.bash_profile文件
2.在文件中添加以上任一組的設(shè)置語句并保存
3.保存文件后執(zhí)行如下命令:
source $HOME/.bash_profile
4.確定環(huán)境變量已經(jīng)設(shè)置完成
echo $PATH
安裝Android開發(fā)環(huán)境
安裝最新Android Studio版本,下載地址:https://developer.android.google.cn/studio/
安裝完成后啟動(dòng)Android Studio,執(zhí)行“Android Studio安裝向?qū)А保_始安裝最新的Android SDK,Android SDK平臺(tái)工具和Android SDK構(gòu)建工具
安裝完之后需要配置Flutter SDK
安裝Flutter SDK
1.在Flutter 官網(wǎng)下載最新的beta版SDK ,其他版本可在官網(wǎng)查看:
https://flutter.io/sdk-archive/#macos
2.解壓下載的SDK zip包到指定目錄,比如執(zhí)行類似如下命令解壓到~/desktop/目錄下:
cd ~/desktop
解壓相應(yīng)的安裝包
unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip
3.添加flutter工具到PATH:
export PATH=`pwd`/flutter/bin:$PATH
以上命令只是臨時(shí)的添加了PATH,如果想永久將flutter設(shè)置到PATH中,可采用如下方法:
export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin
其中[PATH_TO_FLUTTER_GIT_DIRECTORY]替換為你真實(shí)的Flutter SDK解壓縮后存放的目錄
source $HOME/.bash_profile
echo $PATH
執(zhí)行如下命令確定PATH已經(jīng)設(shè)置完成
保存文件后執(zhí)行如下命令:
打開或創(chuàng)建$HOME/.bash_profile文件
在文件中添加
這是添加PATH后的結(jié)果
執(zhí)行如下命令查看是否需要安裝其他依賴項(xiàng)
flutter doctor
這是執(zhí)行的結(jié)果
[?] Flutter (Channel beta, v0.9.4, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[?] iOS toolchain - develop for iOS devices (Xcode 10.0)
[?] Android Studio (version 3.2)
[!] IntelliJ IDEA Ultimate Edition (version 2017.2.5)
? ?? Flutter plugin not installed; this adds Flutter specific functionality.
? ?? Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
? ?! No devices available
! Doctor found issues in 2 categories.
根據(jù)內(nèi)容說明在AndroidStudio中并未安裝Dart 和Flutter插件,所以需要在AndroidStudio
命令行繼續(xù)執(zhí)行flutter doctor
可以根據(jù)執(zhí)行的結(jié)果,判斷Flutter安裝過程中,哪一項(xiàng)沒有安裝完成,并繼續(xù)安裝下邊的插件
在AndroidStudio中新建項(xiàng)目
選擇Start a new Flutter Application
Flutter Application
關(guān)聯(lián)現(xiàn)有項(xiàng)目
一、創(chuàng)建Flutter模塊
假設(shè)你有一個(gè)iOS工程,路徑為?/Users/userName/Desktop/flutterC(如下圖)
說說如何創(chuàng)建my_flutter
首先用Xcode創(chuàng)建一個(gè)iOS工程,步驟不做介紹了。然后在項(xiàng)目的根目錄(flutterC)執(zhí)行一下命令:
flutter?create?-t module my_flutter
注意如果發(fā)現(xiàn)命令行結(jié)果:-bash: flutter: command not found,那么是因?yàn)镻ATH中的路徑失效了,需要重新將flutter添加到PATH中。
如果命令行正常執(zhí)行,那么有下圖,表明創(chuàng)建Flutter模塊成功,如上圖中my_flutter即是
注:當(dāng)前筆者是通過 Android Studio 開發(fā)Flutter,無法直接創(chuàng)建iOS的Flutter模塊(如下圖,后續(xù)可能會(huì)支持),所以建議用官方的方式,通過如上命令來創(chuàng)建
二、需要在項(xiàng)目中Enable Bitcode 設(shè)置為NO
1. 在Podfile文件中添加Flutter app
source'https://github.com/CocoaPods/Specs.git'
platform:ios,'9.0'
inhibit_all_warnings!
target? 'flutterCeshi' do
end
flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
其中flutter_application_path 是my_flutter 相對(duì)當(dāng)前flutterCeshi項(xiàng)目中的地址
2.然后在命令行中 pod install
參考文檔:http://www.lxweimin.com/p/af085d4420fd
參考文檔:https://mp.weixin.qq.com/s/chHTbP01O_mOCqzFYeWwCQ
歡迎關(guān)注我的公眾號(hào),專注iOS開發(fā)、大前端開發(fā)、跨平臺(tái)技術(shù)分享。