Mac OS下Flutter環境搭建記錄，VS Code開發

安裝Flutter

獲取FlutterSDK

終端cd進入SDK安裝目錄，比如
cd ~/FlutterSDK

由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變量加入到用戶環境變量中：
 export PUB_HOSTED_URL=https://pub.flutter-io.cn
 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
 git clone -b dev https://github.com/flutter/flutter.git
 過程比較漫長，請耐心等待

設置環境變量

open ~/.bash_profile

把下面幾句追加到尾部
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH="~/FlutterSDK/flutter/bin:$PATH"
這里要注意，寫自己FlutterSDK的路徑，前面我SDK放在了~/FlutterSDK下


如果使用zsh的朋友，還需要在 ~/.zshrc 中添加
source ~/.bash_profile

這樣就能保證每次啟動新的終端時候環境變量生效

注意： 此鏡像為臨時鏡像，並不能保證一直可用，讀者可以參考https://flutter.io/community/china 以獲得有關鏡像服務器的最新動態。

檢查運新環境

環境變量配置完畢之后，新開啟一個終端窗口

flutter docter
[✓] Flutter (Channel dev, v1.10.14, on Mac OS X 10.14.4 18E227, locale
    zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.39.2)
[✓] Connected device (1 available)

如果所有的環境全部配置的情況應該是上面這樣。如果運行過程中有報錯，運行報錯提示的命令即可，如
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.12.2 16C67, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    ✗ Android SDK file not found: /Users/conan/Library/Android/sdk/platforms/android-28/android.jar.
[!] 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
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        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
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Community Edition (version 2016.3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    ✗ This install is older than the minimum recommended version of 2017.1.0.
[!] IntelliJ IDEA Ultimate Edition (version 2016.3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    ✗ This install is older than the minimum recommended version of 2017.1.0.
[!] Connected devices
    ! No devices available

! Doctor found issues in 5 categories.

提示已經非常清楚了。安裝Xcode和Android Studio 然后執行對應的命令，這里不多贅述

Visual Studio Code運行Flutter程序

• 裝插件

  應用商店中 搜索 dart 、Flutter 安裝
  

• 配置launch

  開啟launch.json，點擊左邊的 蟲子（debug）圖標，左上角的⚙齒輪圖標（設置）配置如下
  
  {
      // 使用 IntelliSense 了解相關屬性。 
      // 懸停以查看現有屬性的描述。
      // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Flutter",
              "request": "launch",
              "type": "dart",
              "program": "~/HelloWorld/hello_world/lib/main.dart",
          }
      ]
  }
  
  

• 配置Settings

  設置settings.json文件，點擊左下角的齒輪⚙，選擇”設置“打開設置界面。 用戶選項卡-->擴展-->Run Code configuration. 找到”在settings.json中編輯“，點擊打開settings.json頁面。
  
  {
      "window.zoomLevel": 0,
      "editor.fontSize": 16,
      "editor.wordWrap": "on",
      "leetcode.endpoint": "leetcode-cn",
      "code-runner.runInTerminal": true, //這里需要設置成YES	
      "dart.flutterSdkPath": "~/FlutterSDK/flutter",  //FlutterSDK的安裝路徑
      "dart.checkForSdkUpdates": false
  }
  

  ​

• 創建項目

  1.command + shift + p 或者 查看->命令面板 
  2.輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
  3.輸入 Project 名稱 (如hello_world), 然后按回車鍵
  4.指定放置項目的位置，然后按藍色的確定按鈕
  5.等待項目創建繼續，並顯示main.dart文件
  

• 運行Flutter程序

  1.確保在VS Code的最底部藍色條選擇了目標設備
  2.按 F5 鍵或調用Debug>Start Debugging
  3.等待應用程序啟動
  如果一切正常，在應用程序建成功后，就可以在設備或模擬器上看到應用程序
  

• 體驗熱重載

  vscode修改工程中lib/main.dart
  將字符串
  'You have pushed the button this many times:' 更改為
  'hello world:'
  
  按快捷鍵 command + s, 或者點擊 熱重載按鈕 (綠色圓形箭頭按鈕). 立刻就可以看見文件改變了。非常的爽。