Flutter 的背景就不過多介紹了，它最直接對(duì)標(biāo)的跨平臺(tái)移動(dòng)應(yīng)用程序框架就是 Facebook 旗下的 React Native,。今天介紹的是 Flutter 在 Windows 中的開發(fā)環(huán)境搭建,，如果想了解 React Native 的環(huán)境搭建，可以參考之前的『Windows 平臺(tái) React Native 開發(fā)環(huán)境搭建筆記』,。

下面進(jìn)入正題,。

注：撰文時(shí) Flutter 的版本為 2.10.4。

準(zhǔn)備

Flutter SDK

前往官網(wǎng)下載即可,。

官方提供了 Windows,、macOS、Linux 和 Chrome OS 四個(gè)平臺(tái)的開發(fā)套件,。

同時(shí)還考慮到中國開發(fā)者的特殊情況,，貼心地標(biāo)注了「Using Flutter in China」。

將下載好的壓縮包解壓到你想要安裝的路徑,。注意：路徑不能包含特殊字符,，且不要安裝到如 C:/Program Files/ 等高權(quán)限路徑。

接下來,，將 ./flutter/bin目錄添加到環(huán)境變量：

因?yàn)橐恍?Flutter 命令需要聯(lián)網(wǎng)獲取數(shù)據(jù),，由于眾所周知的原因，在國內(nèi)直接訪問很可能不會(huì)成功,，不過沒關(guān)系,，Google 為國內(nèi)開發(fā)者搭建了臨時(shí)鏡像。你可以將如下環(huán)境變量加入到用戶環(huán)境變量中：

官方文檔到這里就會(huì)讓你執(zhí)行 Flutter 命令,，但我不建議這么做,，我們可以先把開發(fā)的 IDE 也裝上,。

Android Studio

官方支持使用『Android Studio』,、『IntelliJ IDEA』和『Visual Studio Code』等 IDE 來開發(fā),，由于我本身就是 Android 開發(fā)者,，所以還是繼續(xù)用『Android Studio』就好,。

建議使用最新版,。

『Android Studio』可以很方便地幫我們下載所需的 Android SDK,，減少手動(dòng)配置的麻煩,。

同時(shí),，你還需要在『Android Studio』中安裝 Flutter 插件：

在插件市場(chǎng)中搜索安裝即可，安裝 Flutter 插件的同時(shí),，它會(huì)幫你自動(dòng)安裝 Dart 插件。

初始化環(huán)境

在『CMD』或者『Powershell』中運(yùn)行以下命令：

注意,，目前 Flutter 不支持像『Git Bash』這樣的第三方 Shell。

上述命令會(huì)檢查你的現(xiàn)有環(huán)境,，并將檢測(cè)結(jié)果以報(bào)告形式呈現(xiàn)出來,。仔細(xì)閱讀它顯示的內(nèi)容,，檢查是否有尚未安裝的軟件或是有其他的步驟需要完成（通常會(huì)以粗體呈現(xiàn)）。

比如我執(zhí)行完,，會(huì)得到如下結(jié)果：

可以看到,，目前 Flutter SDK、『Android Studio』和『IntelliJ IDEA』我是安裝完成的,，同時(shí)也連接了設(shè)備,。

然后看未配置的項(xiàng)。

「Android toolchain」一項(xiàng)提示 cmdline-tools component is missing,，同時(shí)它還提供了一個(gè)安裝命令給我們,。我們不需要參考它的命令，直接打開『Android Studio』的「SDK Manager」,，安裝「Android SDK Command-line Tools」即可,。

「Android toolchain」一項(xiàng)同時(shí)還提示 Android license status unknown。出現(xiàn)該提示的原因是,，在使用 Flutter 前,，你必須同意 Android SDK 平臺(tái)的協(xié)議，執(zhí)行以下命令進(jìn)行協(xié)議確認(rèn)：

接下來看到提示『Chrome』和『Visual Studio』未安裝,，因?yàn)?Flutter 不僅支持移動(dòng)端（Android 和 iOS）的跨平臺(tái)開發(fā)，同時(shí)也支持桌面平臺(tái)（Windows,、macOS,、Linux）和 Web 平臺(tái)的開發(fā)，所以會(huì)報(bào)出該錯(cuò)誤,，不過由于我目前僅需要開發(fā) Android 和 iOS 的跨平臺(tái)移動(dòng)應(yīng)用,，所以這兩項(xiàng)缺失并不會(huì)對(duì)我造成影響，無需理會(huì),。

最后一項(xiàng)「HTTP Host Availability」提示連接 https://maven.google.com/ 超時(shí),，這是因?yàn)楸娝苤脑驀鴥?nèi)無法訪問到該域名，解決的方法也有很多種。

我參考的是『Android Studio』內(nèi)的處理方式,，目前『Android Studio』內(nèi)部「SDK Update Sites」使用的都是 https://dl.google.com/ 這個(gè)域名,，日常使用沒有問題,，證明這個(gè)域名是可通的,。

那我也可以將 Flutter 的下載切到這個(gè)源上,。在 Flutter SDK 安裝目錄中打開 ./packages/flutter_tools/lib/src/http_host_validator.dart 文件，將 https://maven.google.com/ 修改為 https://dl.google.com/dl/android/maven2/ 并保存,，然后刪除 ./bin/cache 文件夾。實(shí)際上國內(nèi)鏡像源也很多，你可以切到其他鏡像源上,，比如阿里云等,。

問題解決完了,，接下來重新執(zhí)行 flutter doctor,。

可以看到上面的問題都正確處理了,。

建立項(xiàng)目

上面的配置沒問題后，就可以創(chuàng)建項(xiàng)目了,，『Android Studio』支持直接創(chuàng)建 Flutter 項(xiàng)目,。

初次創(chuàng)建可能需要配置 Flutter SDK 的路徑,。

簡單填寫一下項(xiàng)目的信息，就可以創(chuàng)建了,。

這里有一個(gè)需要注意的點(diǎn),，就是項(xiàng)目名稱不能使用大寫，這是與常規(guī) Android 項(xiàng)目不一致的地方,，只能使用小寫字母以及下劃線,，否則會(huì)提示錯(cuò)誤。

創(chuàng)建成功之后你可以在上方工具欄中選擇你的設(shè)備運(yùn)行項(xiàng)目,。

我初次運(yùn)行的時(shí)候,，報(bào)了以下錯(cuò)誤：

大概意思就是 NDK 沒有正確配置，我嘗試在 /android/local.properties 文件中添加 NDK 的路徑,，并沒有奏效,。

需要前往 /android/app/build.gradle 中修改：

添加 NDK 的版本即可，這個(gè) NDK 版本可以從本地獲取,，打開 Android SDK 目錄,，在 ./ndk 文件夾下可以找到以版本號(hào)命名的文件夾。

比如我這里有兩個(gè),，我就復(fù)制最新的填上去,。

假如你本地沒有 NDK，可以前往『Android Studio』的「SDK Manager」中下載,。

添加了 NDK 版本信息后,，就可以運(yùn)行了，F(xiàn)lutter 相比原 Android 項(xiàng)目有一個(gè)不同,，就是修改 build.gradle 文件不需要手動(dòng) Sync,。

運(yùn)行效果如下：

Flutter 的默認(rèn) Demo 不是「Hello World」，而是一個(gè)計(jì)數(shù)器,，通過點(diǎn)擊右下方的 FloatingActionButton 來對(duì)屏幕中間的數(shù)進(jìn)行自增,。

Hot Reload

我們還可以體驗(yàn)一下 Flutter 的 Hot Reload 功能。

打開 ./lib/main.dart 文件,，整個(gè)頁面的代碼就在這個(gè)文件中,，MyApp 代碼如下：

可以看到默認(rèn)設(shè)置的主題色為 Colors.blue，我們將其修改為 Colors.green,，然后保存文件（快捷鍵不用我教吧）或者點(diǎn)擊工具欄上的閃電狀 Hot Reload 按鈕：

應(yīng)用不需要重啟,，直接就改變了顏色：

總結(jié)

不難看出，相比 React Native 的開發(fā)環(huán)境搭建,，F(xiàn)lutter 要輕松許多,，這是好事，避免許多開發(fā)者在搭建環(huán)境的時(shí)候就勸退情況,。

目前看來,，F(xiàn)lutter 推廣的門檻在于 Dart 語言,。

不管怎么樣，我依然看好 Flutter 的生態(tài)