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

下面進入正題。

注：撰文時 Flutter 的版本為 2.10.4。

準備

Flutter SDK

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

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

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

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

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

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

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

Android Studio

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

建議使用最新版。

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

同時，你還需要在『Android Studio』中安裝 Flutter 插件：

在插件市場中搜索安裝即可，安裝 Flutter 插件的同時，它會幫你自動安裝 Dart 插件。

初始化環(huán)境

在『CMD』或者『Powershell』中運行以下命令：

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

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

比如我執(zhí)行完，會得到如下結果：

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

然后看未配置的項。

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

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

接下來看到提示『Chrome』和『Visual Studio』未安裝，因為 Flutter 不僅支持移動端（Android 和 iOS）的跨平臺開發(fā)，同時也支持桌面平臺（Windows、macOS、Linux）和 Web 平臺的開發(fā)，所以會報出該錯誤，不過由于我目前僅需要開發(fā) Android 和 iOS 的跨平臺移動應用，所以這兩項缺失并不會對我造成影響，無需理會。

最后一項「HTTP Host Availability」提示連接 https://maven.google.com/ 超時，這是因為眾所周知的原因國內無法訪問到該域名，解決的方法也有很多種。

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

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

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

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

建立項目

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

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

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

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

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

我初次運行的時候，報了以下錯誤：

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

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

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

比如我這里有兩個，我就復制最新的填上去。

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

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

運行效果如下：

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

Hot Reload

我們還可以體驗一下 Flutter 的 Hot Reload 功能。

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

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

應用不需要重啟，直接就改變了顏色：

總結

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

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

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