Flutter入門第一講：環境搭建（mac os為例）

文：毛毛，版權歸屬https://maomao.ink，轉載請注明出處！

《Flutter零基礎入門》，從無到有建構Android、iOS雙平台APP，更新中…

今天開始，我重新撿起之前中斷的Flutter學習。在新的電腦上搭建新的環境，記錄如下，希望可以幫助到你！

本文參考資料：

【Flutter中文網】
《Flutter實戰》

步驟一：設定鏡像

将下面兩個鏡像位址導入到環境變量中。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

複制

環境變量設定步驟：

打開終端，輸入 sudo vi ~/.bash_profile ，按回車輸入密碼後會打開bash_profile檔案。（一定要用sudo，否則沒權限儲存檔案。）
在打開的vim編輯界面添加上述兩行環境變量。添加步驟：按下鍵盤 i 進入編輯模式，編輯完成後按 esc 、再輸入 :wq ，按下回車即可退出。如果不想儲存，就輸入 :q 退出。

步驟二：下載下傳Flutter SDK

去Flutter官網下載下傳最新可用的安裝包，官網位址：https://flutter.io/sdk-archive/#macos
解壓sdk，将sdk目錄放在合适的位置

3.設定環境變量。将flutter所在目錄設定到環境變量中，以我的配置為例：

export PATH=~/Documents/demo/flutter_src/flutter/bin:$PATH

複制

其中

/Documents/demo/flutter_src/

是我flutter檔案夾的根目錄，需根據情況自行修改。

步驟三、運作flutter doctor指令

設定好環境變量以後可以在終端任何地方運作

flutter doctor

指令，如未設定，需跳轉到flutter所在目錄運作。

運作完之後會出現診斷結果，我初次運作結果如下：

maomaodeMacBook-Pro:demo maomao$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G2208,
    locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK  
    version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run:
      flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To
      install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ Brew can be used to install tools for iOS device development.
      Download brew at https://brew.sh/.
[!] Android Studio (version 3.2)
    ✗ Flutter plugin not installed; this adds Flutter specific
      functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.
maomaodeMacBook-Pro:demo maomao$

複制

從診斷結果來看，我還有兩個步驟沒有完成。一個是Xcode配置，另一個是AndroidStudio配置，都是與Flutter相關的。如果你未安裝Xcode或者AndroidStudio，應該會提示你安裝。

步驟四、配置Xcode，安裝 libimobiledevice 和 ideviceinstaller

網上查了一堆，發現這兩個插件都是通過Homebrew指令來安裝的，是以需要先安裝Homebrew。Homebrew是一個Xcode的輔助工具，新安裝的Xcode是不帶的，需要自行安裝。

Homebrew 安裝步驟：

終端運作： /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.按提示進行安裝，運作

brew

指令檢查是否安裝成功。

安裝 libimobiledevice

brew install libimobiledevice

複制

安裝 ideviceinstaller

brew install ideviceinstaller

複制

安裝完成之後，

flutter doctor

，發現報如下錯誤：

⣷Unhandled exception:
Exception: ideviceinfo returned an error:
ERROR: Could not connect to lockdownd, error code -8

複制

解決辦法：運作

sudo chmod -R 777 /var/db/lockdown

，輸入密碼。

再次運作

flutter doctor

，發現iOS部分還是報錯如下：

iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is
      necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch
        /Applications/Xcode.app/Contents/Developer
    ✗ Verify that all connected devices have been paired with this
      computer in Xcode.
      If all devices have been paired, libimobiledevice and
      ideviceinstaller may require updating.
      To update with Brew, run:
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will
        not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup

複制

根據提示依次運作如下指令：

sudo xcode-select --switch
brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup//這段下載下傳要很久

複制

上面是我遇到的情況，具體診斷結果會因人而異，不管怎樣，你隻要照着報錯下面的提示做就行了（就是

run:

下面的指令）。

運作完所有上述指令，再運作flutter doctor，在iOS項裡面還有如下錯誤：

 Xcode installation is incomplete; a full installation is necessary for iOS development.

[!] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

複制

這裡提示說Xcode沒有完全安裝，我去AppStore搜Xcode，發現我的Xcode需要更新了，按提示更新完畢。如果你的Xcode是安裝的最新完整版，應該會少很多問題。

安裝完成之後更具提示運作指令：

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

複制

如果運作指令報錯，嘗試重新開機一下終端。

折騰完上面的步驟，iOS的報錯項基本解決了。

步驟五、配置AndroidStudio，安裝 Dart 和 Flutter 插件

按照下圖操作步驟，安裝Dart和Flutter插件。

步驟六、最後運作flutter doctor指令

完成所有步驟之後，最後運作

flutter doctor

進行檢查，這個指令可以随時運作檢查。

maomaodeMacBook-Pro:~ maomao$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.13.6 17G2208, locale
    zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

複制

以上就是環境搭建的整個過程，下一篇給大家講如何用flutter運作最簡單的應用“hello world”，敬請期待！