Flutter入門:在Windows上搭建Flutter開發環境

使用鏡像

由於在國內訪問Flutter有時可能會受到限制,Flutter官方爲中國開發者搭建了臨時鏡像,大家可以將如下鍵值對加入到環境變量中:

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

必要的工具

工具: Flutter 依賴下面這些命令行工具.
Git for Windows (Git命令行工具)

如果已安裝Git for Windows,請確保命令提示符或PowerShell中運行 git 命令,不然在後面運行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時需要手動添加C:\Program Files\Git\bin至Path系統環境變量中。

注意:此處的git路徑僅爲示例,實際應爲你的git安裝的具體路徑

獲取Flutter SDK

  1. 去flutter官網下載其最新可用的安裝包,點擊下載
注意:Flutter的渠道版本會不停變動,請以Flutter官網爲準。另外,在中國大陸地區,要想正常獲取安裝包列表或下載安裝包,可能需要翻牆,讀者也可以去Flutter github項目下去下載安裝包。不過我的建議是直接通過git進行clone,如下:git clone -b stable https://github.com/flutter/flutter.git
  1. 將安裝包zip解壓到你想安裝Flutter SDK的路徑(如:C:\src\flutter;注意,不要將flutter安裝到需要一些高權限的路徑如C:\Program Files\)。
  2. 在Flutter安裝目錄的flutter文件下找到flutter_console.bat,雙擊運行並啓動flutter命令行,接下來,你就可以在Flutter命令行運行flutter命令了。
注意: 由於一些flutter命令需要聯網獲取數據,如果您是在國內訪問,由於衆所周知的原因,直接訪問很可能不會成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google爲國內開發者搭建的臨時鏡像。

更新環境變量

要在終端運行 flutter 命令, 你需要添加以下環境變量到系統PATH:

  1. 轉到 “控制面板>系統安全>系統>高級系統設置>環境變量”
  2. 在“系統變量”下檢查是否有名爲“Path”的條目:
  • 如果該條目存在, 追加 flutter\bin的全路徑,使用 ; 作爲分隔符.
  • 如果條目不存在, 創建一個新系統變量 Path ,然後將 flutter\bin的全路徑作爲它的值.
  1. 在“系統變量”下檢查是否有名爲”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目,如果沒有,也添加它們。(即配置使用鏡像步驟中的鍵值對)
  2. 重啓Windows以應用此更改

運行 flutter doctor

打開一個新的命令提示符或PowerShell窗口並運行以下命令以查看是否需要安裝任何依賴項來完成安裝:

flutter doctor

在命令提示符或PowerShell窗口中運行此命令。目前,Flutter不支持像Git Bash這樣的第三方shell。
該命令檢查您的環境並在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter裏了,沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務(以粗體顯示)
例如:

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

第一次運行一個flutter命令(如flutter doctor)時,它會下載它自己的依賴項並自行編譯。以後再運行就會快得多。

以下各部分介紹如何執行這些任務並完成設置過程。你會看到在flutter doctor輸出中, 如果你選擇使用IDE,我們提供了,IntelliJ IDEA,Android Studio和VS Code的插件, 請參閱編輯器設置 以瞭解安裝Flutter和Dart插件的步驟。

一旦你安裝了任何缺失的依賴,再次運行flutter doctor命令來驗證你是否已經正確地設置了。

編輯器設置

使用 flutter 命令行工具,您可以使用任何編輯器來開發Flutter應用程序。輸入flutter help在提示符下查看可用的工具。

Android Studio設置

安裝Flutter和Dart兩個插件
  • Flutter插件: 支持Flutter開發工作流 (運行、調試、熱重載等).
  • Dart插件: 提供代碼分析 (輸入代碼時進行驗證、代碼補全等).
  1. 啓動Android Studio.
  2. 打開插件首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
  3. 選擇 Browse repositories…, 選擇 Flutter 插件並點擊 install.
  4. 重啓Android Studio後插件生效.

創建Flutter應用

  1. 選擇 File>New Flutter Project
  2. 選擇 Flutter application 作爲 project 類型, 然後點擊 Next
  3. 輸入項目名稱 (如 myapp), 然後點擊 Next
  4. 點擊 Finish
  5. 等待Android Studio安裝SDK並創建項目.
    上述命令創建一個Flutter項目,項目名爲myapp,其中包含一個使用Material 組件的簡單演示應用程序。
    在項目目錄中,您應用程序的代碼位於 lib/main.dart.

運行Flutter應用程序

  1. 定位到Android Studio 工具欄:
    在這裏插入圖片描述
  2. 在 target selector 中, 選擇一個運行該應用的Android設備. 如果沒有列出可用,請選擇 Tools>Android>AVD Manager 並在那裏創建一個
  3. 在工具欄中點擊 Run圖標, 或者調用菜單項 Run > Run.
  4. 如果一切正常, 您應該在您的設備或模擬器上會看到啓動的應用程序:
    在這裏插入圖片描述
以上爲在Windows上搭建Flutter開發環境的全部內容,如有其他疑問可以留言,會及時進行回覆
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章