第1集 Flutter 在windows 下的開發環境搭建

0x01 什麼是Flutter？

學習一樣新技術之前，我們一般都需要先大致瞭解下它是什麼東東？

百度百科說：

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

博主語：

Flutter 是谷歌支持推出的新一代跨平臺移動開發框架，因爲Android,IOS 通吃哈。

0x02 Windows下搭建Flutter開發環境

翻開 Flutter 英文官網文檔，我們可以看到針對Windows ,Mac OS, Linux 都提供了Flutter開發環境說明。

由於博主還買不起Mac OS,所以接下來讓我們一起學習下如何在windows 上搭建Flutter 開發環境。

安裝之前，我們需要確認下，當前自己的操作系統是否滿足安裝條件。

2.1 Windows 下安裝Flutter 條件

Windows 下安裝Flutter 開發環境的條件如下：

• 操作系統：Windows 7 SP1 或者更新版本 (64-bit) ，即Win8,Win10 也支持。
• 磁盤空間: 至少要有400MB 空間，只是基礎的Flutter 安裝包。

這是因爲當前最新穩定版本壓縮包需要320MB

工具：Flutter 依賴的一些工具

• Windows PowerShell 5.0 或更新（Win10 操作系統自帶）
• Git for Windows 2.x

• （安裝時注意勾選Use Git from the Windows Command Prompt）
• 也就是說，必須在cmd 和 PowerShell 中輸入git --version 可以正確使用。

2.2 下載Flutter SDK

下載地址一：flutter_windows_v1.9.1+hotfix.6-stable.zip

下載地址二：歷史歸檔版本下載

2.3 解壓Flutter SDK

如果可以，最好不要解壓到C:\Program Files 或 C:\Program Files (x86) 目錄下。

因爲這兩個目錄一般需要特殊權限，比如管理員權限纔可以操作。

推薦解壓解壓到類似這樣的目錄下，比如 C:\app\flutter\

2.4 配置Flutter SDK環境變量

爲了在命令行中不用每次都切換到Flutter 安裝目錄下，建議配置下環境變量。

新建環境變量，比如

變量名: FLUTTER_HOME
變量值: C:\app\fluter\flutter_windows_v1.9.1+hotfix.6-stable\flutter 

編輯PATH環境變量

%FLUTTER_HOME%\bin

2.5 配置Android SDK 環境變量

這一步，官方文檔沒說，但是親測試了下，最好配置下，否則可能出問題。

找到我們的Android SDK 安裝路徑，比如是這樣

C:\app\Android\sdk

新建環境變量：

變量名：ANDROID_HOME
變量值：C:\app\Android\sdk

編輯PATH環境變量

%ANDROID_HOME%\platform-tools\
%ANDROID_HOME%\tools\

2.6 Flutter 關聯Android SDK

爲了能讓 Flutter 識別Android SDK 的安裝路徑，我們需要配置下，否則會報錯。

比如我們的Android SDK 安裝目錄是C:\app\Android\sdk，那麼就執行如下命令：

flutter config --android-sdk C:\app\Android\sdk\

如果不配置這個，可能會出現 no device 的錯誤。

2.7 安裝Dart 和 Flutter 插件

雖然Flutter可以使用任何文本編輯器結合命令行工具來構建應用，但是最好還是用IDE來開發比較會更加高效。

要想讓IDE 支持Flutter 開發，需要安裝Flutter 插件。

值得注意的是，Flutter 是由Dart 語言進行開發的，因此還需要Dart 支持。

Dart 是一種針對 web 和移動設備開發進行了優化的編程語言

如果使用的是Android Studio或Intellij Idea ,可以搜索Dart

• 安裝Dart 插件
  

• 安裝Flutter 插件
  
  如果使用的是Visual Code

• 安裝Dart 插件,輸入Dart 搜索
  

• 安裝Flutter 插件，輸入Flutter
  

2.7 檢查驗證Flutter 開發環境

Flutter 提供了一個檢查環境狀態的工具，可以幫助我們檢查當前的開發環境搭建哪裏還有問題沒了。

doctor 中文名醫生，執行這個命令幫我檢查下Flutter 相關的開發環境是否良好。

flutter doctor

如果一切順利會看到如下內容

---

本節完~

下一集： 第2集 創建你的第一個Flutter 應用程序