「乾貨」Flutter開發環境配置備忘錄

為什麼要用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>

打開以後是這樣:


「乾貨」Flutter開發環境配置備忘錄

你可以通過標籤來切換你的操作系統環境來下載對應的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環境的配置主要是在HomebrewCocoapods的環境配置上卡了很久,主要是沒有梯子....也實在沒有找到便宜又實惠的梯子,誰有的話留言推薦一個,感謝!

沒有梯子,那隻能曲線救國了.......

  • 第一次Flutter Doctor........
「乾貨」Flutter開發環境配置備忘錄

按照提示我運行了“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........


「乾貨」Flutter開發環境配置備忘錄

因為我們前面已經配置好了Homebrew的環境,執行前面3個命令都順利執行,但是到紅色箭頭指向的代碼運行就又出問題了:


「乾貨」Flutter開發環境配置備忘錄

這一堆提示就是告訴我,代碼它拉不下來...拉不下來....拉不下來....

繼續搞吧....把它提示的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>

然後又出現了....


「乾貨」Flutter開發環境配置備忘錄

換個命令執行:

<code>./autogen.sh --disable-openssl/<code>

好吧,這個時候錯誤提示變了,告訴我缺少組件了,總算前進了一步:


「乾貨」Flutter開發環境配置備忘錄

執行:

<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>

按提示依次執行:


「乾貨」Flutter開發環境配置備忘錄

執行結果提示:


「乾貨」Flutter開發環境配置備忘錄

重新執行:

<code>./autogen.sh --disable-openssl/<code>

又報錯(崩潰ing....)


「乾貨」Flutter開發環境配置備忘錄

需要安裝libgcrypt庫:

<code>brew install libgcrypt/<code>

安裝完畢後重新執行:

<code>./autogen.sh --disable-openssl/<code>

終於:


「乾貨」Flutter開發環境配置備忘錄

按提示:

<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 Doctor........
  • 安裝成功後再檢查Flutter環境:


    「乾貨」Flutter開發環境配置備忘錄

    繼續執行:

    <code>brew install ios-deploy/<code>
  • 第四次Flutter Doctor........
  • 安裝完畢重新檢查:

    「乾貨」Flutter開發環境配置備忘錄

    終於只剩下最後一個了......

    執行:

    <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>
  • 第N次Flutter Doctor........
  • 終於,各項都變成了綠色對號......



    四、結語

    遇到的各種不痛快,更多原因還是因為網絡的問題,沒有梯子,很多站的代碼確實沒有辦法拉下來,或者獲取速度真的慢到讓人牙癢癢。不過見山開山,問題最後都解決了,心裡還是有些許的成就感,哈哈。。

    如果有遇到其他環境配置問題的朋友,可以留言一起探討、學習!

    建議多看看官方文檔還是有很大幫助的,尾巴再貼一下地址,翻到這裡不用回頭去找了,哈哈:

    <code>官方文檔:https://flutter.dev/docs/get-started/install
    中文文檔:https://flutterchina.club/get-started/install//<code>


    分享到:


    相關文章: