vscode 啟動與除錯 flutter 專案

_何大小成_發表於2019-11-26
VSCode除錯Flutter

VSCode 也是 flutter 官方推薦的編輯器。使用 vscode 啟動與除錯 flutter 專案，還是很多問題要注意的。我剛剛開始的時候並不能做到一氣呵成，現在就總結一下具體的步驟。

開發前需要的東西

安裝環境

  1. 安裝 flutter: 安裝地址
  2. 安裝 vscode: 安裝地址
  3. 在 vscode 裡安裝有關的外掛——Dart,flutter 兩個或者其他相關的外掛。
    有關外掛

設定變數

  1. 在環境變數裡填入剛剛下載的 flutter 的存放路徑

    20191126120852.png

  2. 設定 PUB_HOSTED_URL”和“FLUTTER_STORAGE_BASE_URL

如果用官方提供的兩個地址，可能會一直停留在 Resolving dependencies…過不去。

Gradle 預設直連網路，即使 Mac 設定了全域性代理也是一樣。就算你給 Android Studio 設定了代理，它依舊會風輕雲淡地直連那個你在中國一輩子也不可能連上的網站……

所以後面我才改為：

FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
複製程式碼

安裝 android studio/xcode 和模擬器

因為寫這篇文章的時候使用的是 windows,所以只支援 Android。那麼去下載 Android Studio。

如果你是 Mac，又想開發 iOS，下載 XCode。

關於下載模擬器，可以在 AS 中的 AVD Manager 進行下載。

20191126135229.png

flutter doctor

開啟終端，輸入flutter doctor診斷以下執行環境有沒有問題。

20191126135342.png

建立工程

這裡主要介紹的是 VSCode 下如果建立工程：

新建工程

可以在Control+p, 輸入>flutter: new project建立一個工程。

20191126135520.png

20191126135624.png

選擇裝置

點選 VScode 右下角的裝置，然後選擇剛剛在 AS 下載的模擬器。

20191126135859.png

若開啟成功，會自動啟動模擬器，比如：

20191126140017.png

啟動專案

輸入命令: flutter run，等待依賴下載。

20191126140118.png
。

成功啟動後，會看到以下介面。

20191126140228.png

除錯

選擇到除錯（蟲子），新增除錯配置，只管新增配置，然後儲存就好了。選擇左上方的開啟除錯。專案開始打包構建安裝到選擇的選擇的裝置上。

20191126140429.png

配置可以使用這個配置，並儲存：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "dart",
      "name": "Flutter",
      "request": "launch"
    }
  ]
}
複製程式碼

成功除錯後會出現中間的除錯皮膚控制器。

20191126140739.png

熱過載

lib/main.dart 中編輯插入 Text('hello flutter')，儲存檔案，你會發現效果會立馬呈現到 App 上，開發如此絲滑。有點類似前端的 webpack 實現的熱過載功能。

20191126140935.png

相關文章