Windows系統建置Flutter開發環境

演示基於Win10系統,剛好買一台新電腦,建置環境的同時記錄一下過程。

安裝需求

  • Windows 7 SP1或更高版本(64位),基於x86-64
  • 磁盤:1.64GB(不包含IDE/工具)
  • Windows PowerShell 5.0或更高版本(已隨Windows 10預先安裝)
  • 適用於Windows 2.x的Git,安裝時記得選擇”Use Git from the Windows Command Prompt” 選項。
image 3 Windows系統建置Flutter開發環境

安裝Git

若你的電腦已經安裝過Git,且已將路徑添加到環境變數則可以跳過此步驟。

Git官網下載Windows版本的Git安裝檔,安裝步驟全部按預設選擇即可,這邊不多做說明。

安裝Flutter SDK

建議下載最新穩定版本。下載Flutter SDK

image 6 Windows系統建置Flutter開發環境

將壓縮包內容解壓縮至自己想要的位置(ex:C:\src\flutter)。

警告: 請勿在C:\Program Files\需要提升特權的目錄中安裝Flutter 。

flutter1 Windows系統建置Flutter開發環境
image 4 Windows系統建置Flutter開發環境

你也可以通過Git下載。Flutter Github

添加至環境變數

接著將 flutter/bin 添加到環境變數Path內,如此一來我們才能在系統中使用Flutter命令。

flutter2 Windows系統建置Flutter開發環境
flutter3 Windows系統建置Flutter開發環境
flutter4 Windows系統建置Flutter開發環境

在使用者變數處選擇 「Path」 點擊「編輯」,右上角「新增」輸入 C:\src\flutter\bin (圖中src輸錯成scr 不用在意)。

檢測依賴安裝情形

開啟flutter資料夾中的 flutter_console

flutter7 Windows系統建置Flutter開發環境

輸入 flutter doctor 即可檢查安裝依賴項目前的安裝情形,打叉的部分是尚未安裝。

目前 Android SDKAndroid Studio都還未安裝,但是安裝Android Studio的過程中會順便安裝SDK,後續一些操作使用Android Studio也較為方便,因此先安裝Android Studio

flutter8 2 Windows系統建置Flutter開發環境

安裝Android Studio

Android Studio是一個為Android平台開發程式的整合式開發環境,可供開發者免費使用。

Android Studio官方網站

image 7 Windows系統建置Flutter開發環境

安裝完畢後開啟Android Studio,選擇 Tools – SDK Manager

flutter9 Windows系統建置Flutter開發環境

安裝任意版本Android SDK(我個人是使用7.0),如果有更多需求可以在右下角勾選「Show Package Details」勾選安裝。

要準備在Android設備上運行和測試Flutter應用,您需要運行Android 4.1(API級別16)更高版本的Android設備。

flutter10 2 Windows系統建置Flutter開發環境

勾選「Accept」一直下一步等待安裝。

flutter11 2 Windows系統建置Flutter開發環境

我的Android SDK安裝路徑為 AppData/Local/Android/Sdk

image 9 Windows系統建置Flutter開發環境

新增環境變數 ANDROID_HOME 變數值為 Android/Sdk 路徑

flutter16 Windows系統建置Flutter開發環境

開啟Android Studio 選擇File – Settings – Languages & Frameworks – Flutter SDK path路徑選擇至你的flutter sdk位置。

flutter14 Windows系統建置Flutter開發環境

再回到 flutter console 輸入 flutter doctor 可以看見目前大部分依賴已經安裝完畢,但是還需要透過輸入指令 flutter doctor --android-licenses 同意授權。授權過程中有幾處需要輸入 y 進行下一步。

flutter15 Windows系統建置Flutter開發環境

安裝Flutter插件

打開Android Studio,點 File – Settings – Plugins 輸入flutter 安裝並Restart IDE(安裝flutter的同時也會安裝Dart)。

flutter13 Windows系統建置Flutter開發環境

創建模擬器

在Android Studio 選擇Tools – AVD Manager

avd Windows系統建置Flutter開發環境

左下角處按「Create Virtual Device…」。

avd2 2 Windows系統建置Flutter開發環境

選擇模擬器設備(個人是使用Nexus 6P)。

avd3 2 Windows系統建置Flutter開發環境

選擇使用的SDK版本。

avd4 2 Windows系統建置Flutter開發環境

修改模擬器相關訊息後點擊Finish創建。

avd5 2 Windows系統建置Flutter開發環境

如果希望能在自己的手機上實際運行操作,可以在Settings – Android SDK – SDK Tools 安裝 Google USB Driver

至此Flutter的依賴應該都已經安裝完畢,打開flutter console 輸入flutter doctor檢查一下是不是都是勾勾,如果不是應該是上面某些步驟漏掉了,再檢查一下吧。

使用VSCode寫Flutter

個人是很不習慣用Android Studio來寫flutter app的,因為速度很慢,因此我會在VSCode上寫,這邊說明一下在VSCode上寫Flutter app需要經過哪些準備。

安裝 Flutter 擴充。

image 10 Windows系統建置Flutter開發環境

在VSCode中啟動模擬器

同時按下Ctrl+Shift+P 輸入Select Device

vs4 Windows系統建置Flutter開發環境

選中想要啟動的模擬器即可啟動。

vs5 Windows系統建置Flutter開發環境

啟動模擬器之後在終端進入flutter專案資料夾中輸入flutter run 即可運行Flutter APP。

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g Windows系統建置Flutter開發環境
5 1 評分
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論