為什麼要用Flutter?
嗯,本篇文章不會講,因為我認為想看這篇文章的應該已經下定決心要學習Flutter。
Flutter開發環境支持安裝在Windows、Mac OS和Linux下,區別在於Windows和Linux並不能直接通過虛擬機來調試IOS下是否運行正常,而Mac是可以的。
本篇文章主要講述在Mac下配置下踩到的坑,和對應的一些解決方式,我碰到的這些問題你也不一定會碰到,同樣遇到需要可以幫到你....
Windows環境很簡單,按照官網提示,基本不會有什麼問題,沒有Linux環境,所以就不說了,可以參考Mac的配置,會比mac少一些配置。
下面就開始吧......
一、環境工具的準備
首先你的電腦環境先準備好以下工具:
- Git:
官網:https://git-scm.com/
直接下載安裝好就可以了,安裝好以後可以打開終端,輸入"git --version"來檢查是否安裝成功;
- JDK
推薦JDK1.8或者更高版本,下載安裝自行去安裝、配置,同樣可以通過在終端輸入“java version”來檢查是否安裝成功。
- Android SDK
這個你可以跟著IDE的嚮導來一起下載需要的SDK,也可以提前準備好,這個搞過Android開發的應該都有吧?
- IDE
IDE是集成開發環境,可以使用VisualStudio code或者Android Studio來進行開發,VS code更輕量,我更習慣使用Android Studio來進行開發。無論你使用哪款IDE,需要你安裝Flutter和Dart的插件,在IDE的插件管理器搜索Flutter安裝即可,一般Flutter的安裝會自動安裝好Dart插件。
二、Flutter SDK的配置
- Flutter SDK下載地址:
<code>https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos/<code>
打開以後是這樣:
你可以通過標籤來切換你的操作系統環境來下載對應的SDK,推薦下載Stable channel,這是穩定版的SDK,想嚐鮮的話也可以去下載Dev channel的SDK。
下載的是個壓縮包,自己找個位置放一下, 將flutter文件下的bin文件夾加到系統Path變量中。
配置好以後就可以終端輸入“flutter doctor”命令來檢查Flutter環境是否配置完畢,配置的細節可以按照官網的指導來執行。
<code>官方文檔:https://flutter.dev/docs/get-started/install
中文文檔:https://flutterchina.club/get-started/install//<code>
基本的配置就說到這裡吧,有搞不定的可以留言。。。
下面我們針對Mac環境下面配置的一些問題來說一下。
三、Mac環境下的麻煩事
Mac環境的配置主要是在Homebrew、Cocoapods的環境配置上卡了很久,主要是沒有梯子....也實在沒有找到便宜又實惠的梯子,誰有的話留言推薦一個,感謝!
沒有梯子,那隻能曲線救國了.......
- 第一次Flutter Doctor........
按照提示我運行了“brew update”,然後就是無盡的等待、失敗........
只好先解決Homebrew的問題....
沒有天梯,只能想辦法使用國內可用的鏡像,首先,打開終端:
<code>curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_install/<code>
這行命令是獲取官方的安裝腳本把他重命名為“brew_install”文檔保存在終端執行目錄。
然後使用終端vi命令或者自己熟悉的編輯器打開這個文件,找到如下代碼:
<code>BREW_REPO = “https://github.com/Homebrew/brew“.freeze
CORE_TAP_REPO = “https://github.com/Homebrew/homebrew-core“.freeze/<code>
修改為:
<code>BREW_REPO = “https://mirrors.ustc.edu.cn/brew.git “.freeze
CORE_TAP_REPO = “https://mirrors.ustc.edu.cn/homebrew-core.git“.freeze/<code>
主要目的是替換官方源為清華大學的鏡像源,需要注意的是新版本HomeBrew可能沒有CORE_TAP_REPO這句代碼,如果沒有不用新增。 如果這個鏡像有問題的話,可以換成其他源(自己去查查其他可以用的國內源),記得保存關閉。
然後打開終端,執行這個我們修改過的安裝腳本:
<code>/usr/bin/ruby brew_install/<code>
如果在運行過程中出現了:
<code>==> Tapping homebrew/core
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'.../<code>
出現這個原因是因為源不通,代碼拉不下來,解決方法就是更換國內其他鏡像源嗎,手動執行下面這句命令,更換為中科院的鏡像:
<code>git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1/<code>
然後把homebrew-core的鏡像地址也設為中科院的國內鏡像:
<code>cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git/<code>
執行更新,成功:
<code>brew update/<code>
最後用這個命令檢查無錯誤:
<code>brew doctor /<code>
至此HomeBrew就算是安裝完成了.......我是折騰了很久o(╥﹏╥)o
直接使用HomeBrew還需要更改他的默認源.....還有.....
- 替換核心軟件倉庫
<code>cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git /<code>
- 替換 cask 軟件倉庫(提供 macOS 應用和大型二進制文件)
<code>cd "$(brew --repo)"/Library/Taps/caskroom/homebrew-cask
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-cask.git /<code>
- 替換 Bottles 源(Homebrew 預編譯二進制軟件包)
bash(系統默認shell)端用戶:
<code>echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.bash_profile
source ~/.bash_profile/<code>
zsh終端用戶:
<code>echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles' >> ~/.zshrc
source ~/.zshrc/<code>
- 第二次Flutter Doctor........
因為我們前面已經配置好了Homebrew的環境,執行前面3個命令都順利執行,但是到紅色箭頭指向的代碼運行就又出問題了:
這一堆提示就是告訴我,代碼它拉不下來...拉不下來....拉不下來....
繼續搞吧....把它提示的git clone 代碼複製出來,就是這一段:
<code>git clone --branch master https://git.libimobiledevice.org/libimobiledevice.git /Users/liupp/Library/Caches/Homebrew/libimobiledevice--git/<code>
修改為:
<code>git clone --branch master https://github.com/libimobiledevice/libimobiledevice.git /Users/liupp/Library/Caches/Homebrew/libimobiledevice--git/<code>
直接終端執行修改後的命令,執行結束後終端切換到這個目錄下(別問我為什麼找不到liupp目錄,這個是我的用戶,別忘了換成你的用戶目錄名稱....):
<code>cd /Users/liupp/Library/Caches/Homebrew/libimobiledevice--git/<code>
執行:
<code>./autogen.sh/<code>
然後又出現了....
換個命令執行:
<code>./autogen.sh --disable-openssl/<code>
好吧,這個時候錯誤提示變了,告訴我缺少組件了,總算前進了一步:
執行:
<code>brew install gnutls/<code>
安裝完畢提示:
<code>For compilers to find libffi you may need to set:
export LDFLAGS="-L/usr/local/opt/libffi/lib"
For pkg-config to find libffi you may need to set:
export PKG_CONFIG_PATH="/usr/local/opt/libffi/lib/pkgconfig"
==> unbound To have launchd start unbound now and restart at startup:
sudo brew services start unbound/<code>
按提示依次執行:
執行結果提示:
重新執行:
<code>./autogen.sh --disable-openssl/<code>
又報錯(崩潰ing....)
需要安裝libgcrypt庫:
<code>brew install libgcrypt/<code>
安裝完畢後重新執行:
<code>./autogen.sh --disable-openssl/<code>
終於:
按提示:
<code>make/<code>
執行成功後繼續執行:
<code>sudo make install/<code>
執行:
<code>export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib/<code>
安裝:
<code>brew install ideviceinstaller/<code>
安裝成功後再檢查Flutter環境:
繼續執行:
<code>brew install ios-deploy/<code>
安裝完畢重新檢查:
終於只剩下最後一個了......
執行:
<code>brew install cocoapods/<code>
然後噩夢就又開始了....歸根揭底終究還是沒有梯子的問題,由於有了處理HomeBrew的經驗,這次就輕車熟路了。
Cocoapods
CocoaPods 是一個 Cocoa 和 Cocoa Touch 框架的依賴管理器,具體原理和 Homebrew 有點類似,都是從 GitHub 下載索引,然後根據索引下載依賴的源代碼。
對於舊版的 CocoaPods 可以使用如下方法使用 tuna 的鏡像:
<code>$ pod repo remove master
$ pod repo add master https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git
$ pod repo update/<code>
新版的 CocoaPods 不允許用pod repo add直接添加master庫了,但是依然可以:
<code>cd ~/.cocoapods/repos $ pod repo remove master $ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master/<code>
最後進入自己的工程,在自己工程的podFile第一行加上:
<code>source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'/<code>
以後如果想重置為官方Github源的話,可以如下操作:
<code>cd ~/.cocoapods/repos
pod repo remove master
git clone https://github.com/CocoaPods/Specs master
# 最後進入自己的工程,在自己工程的podFile第一行加上
sources 'https://github.com/CocoaPods/Specs'/<code>
終於,各項都變成了綠色對號......
四、結語
遇到的各種不痛快,更多原因還是因為網絡的問題,沒有梯子,很多站的代碼確實沒有辦法拉下來,或者獲取速度真的慢到讓人牙癢癢。不過見山開山,問題最後都解決了,心裡還是有些許的成就感,哈哈。。
如果有遇到其他環境配置問題的朋友,可以留言一起探討、學習!
建議多看看官方文檔還是有很大幫助的,尾巴再貼一下地址,翻到這裡不用回頭去找了,哈哈:
<code>官方文檔:https://flutter.dev/docs/get-started/install
中文文檔:https://flutterchina.club/get-started/install//<code>
閱讀更多 85理工男 的文章