前言
2018年2月27日，Google發佈了Flutter的第一個Beta版本，由於自己是一個Google粉，所以很快就下載嚐鮮了，之後還在簡書上發過一篇博客《你好，Flutter》，是我的第一篇閱讀量過10w的文章。在學習flutter期間也做過一些零散的筆記，但由於當時覺悟不高，並沒整理成冊，而且當時正準備保研，手頭事情很多加上可學習的資料很少，中途便放棄了。
機緣巧合，最近閱讀到了一篇谷歌開發者的文章《Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop》，說是現在的Flutter已經可以運行在Android、ios、MacOS、Linux、Windows和嵌入式設備上了。在好奇心的作祟下，我嘗試著利用Flutter在一些平臺上運行了一些demo，本文便是記錄我利用Flutter實現了移動端、桌面端和Web端的過程，由於移動端應用的demo網上教程很多，所以本文儘快略過，重點將放在桌面端和web端。
Flutter for Mobile
初次瞭解到Flutter的時候便是一個橫跨iOS和Android兩個平臺的框架，無論是在Mac/Linux還是Windows上搭建Flutter的開發環境都很簡單，Windows上的環境搭建可以參考這篇文章《安裝搭建Flutter環境》，Mac/Linux可以參考中文官網給出的教程《安裝和環境配置》
如果你在中國的網絡環境下使用 Flutter，注意一定要按照要求設置好兩個環境變量
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
配置好Flutter開發環境後，我們通過Android Studio新建一個Flutter項目，然後啟動iOS/Android模擬器，選中要運行的模擬器，直接運行Flutter項目即可。運行結果如下：
這裡針對移動端的介紹很少，主要是因為官方文檔已經講解的非常詳細，直接閱讀即可《安裝和環境配置》
Flutter for Desktop
先決條件
要使Flutter在桌面上運行，我們必須使用Flutter的master分支。執行以下代碼即可：
<code>flutter channel master
flutter upgrade/<code>
現在我們再來執行：
<code>flutter doctor/<code>
應該是可以看到類似於下圖的結果（截至2019年7月1日）：
默認情況下，Flutter沒有啟用桌面支持。我們可以通過設置環境變量ENABLE_FLUTTER_DESKTOP = true來實現。
為此，我們需要在不同的終端中執行不同的命令（臨時生效）：
在macOS 或者 Linux上:
<code>export ENABLE_FLUTTER_DESKTOP=true/<code>
在 Windows 上:
PowerShell:
<code>$env:ENABLE_FLUTTER_DESKTOP="true"
/<code>
CMD:
<code>set ENABLE_FLUTTER_DESKTOP=true/<code>
Tips:以上設置環境變量的方式是臨時的，只會在當前終端中生效，想要永久生效請自行配置系統的環境變量
現在我們來執行以下命令，來確保桌面設備已經連接了。
<code>flutter devices/<code>
如果設置成功是會出現下面的結果的：
<code>$ flutter devices
1 connected devices:
macOS • macOS • darwin-x64 • Mac OS X 10.14.5 18F203/<code>
針對不同系統手動配置
時至今日，Flutter for Desktop仍然是一個實驗性功能，這意味著Flutter沒有工具支持，無法通過flutter create命令直接新建出一個桌面應用程序。因此，唯一的選擇是手動配置系統特定的文件。值得慶幸的是，Google的Flutter團隊已經為我們做好了這件事。
不過在運行Flutter for Desktop之前，我們需要先針對Windows/MacOS進行手動配置（Linux的配置與MacOS類似）。
MacOS
執行flutter doctor -v，根據輸出信息選擇我們需要安裝配置的包，Xcode的下載直接在Mac App Store下載即可，Xcode相關開發包的安裝直接執行下面的命令即可。
<code>sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/<code>
然後通過輸入命令 sudo xcodebuild -license 來確保已經同意 Xcode 的許可協議。
這裡重點提一下CocoaPods的安裝配置。
CocoaPods是iOS開發、macOS開發中的包依賴管理工具，效果如Java中的Maven，nodejs的npm。
安裝只需執行以下命令：
<code>sudo gem install cocoapods/<code>
如果下載太慢可以更換一下國內源
<code>gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.com//<code>
然後我們需要對CocoaPods初始化，由於 CocoaPods 包有500兆左右的大小，直接執行pod setup會從 github 上 clone 得極其漫長，這裡給出解決方案。
依次執行下面的命令即可：
<code>cd ~/.cocoapods/repos
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
pod setup/<code>
Windows
感謝微軟爸爸提供的VS套件，很多開發環境通過Visual Studio直接安裝就可以了，如何下載安裝VS自行百度，安裝的時候記得選以下桌面開發的套件：
運行官方demo
根據不同系統配置好環境後，我們便可以開始運行Google團隊提供的Flutter for Desktop案例了。
在終端中執行下述命令：
<code>git clone https://github.com/google/flutter-desktop-embedding.git
cd example/<code>
example文件夾是這個demo的示例應用程序，它具有所有必需的構建腳本，這些腳本在MacOS，Windows和Linux上運行Flutter是必需的。如果我們在VS Code中打開示例文件夾，我們將能夠看到如下內容：
lib/main.dart是整個flutter項目的啟動文件，這裡我們無需過多關注linux/macos/windows裡面的內容。
接下來在example目錄下執行下面命令來獲取項目所需要的依賴文件
<code>flutter packages get/<code>
在我們開始運行我們的應用程序之前，還有最後一步。雖然我們之前已經配置好了Flutter的開發環境，但是由於桌面開發仍有一些配置項是不一樣的，所以我們需要執行下面一個命令來確保所有需要的依賴都被安裝成功了。
<code>flutter precache --macos/<code>
根據你自己的系統切換所需的該命令之後的參數。
現在我們可以將我們的Flutter應用程序作為桌面應用程序運行了。
在終端執行：
<code>flutter run/<code>
終端輸出的結果應該是類似下面這樣的：
運行起來的結果應該如下圖所示：
是不是和之前的App一模一樣呢？運行在windows上也是一樣的（因為我沒有在Linux下配置Flutter的環境，所以這裡就不放出來了）。
Tips：如果無法運行demo，記得執行flutter doctor -v命令查看究竟還缺少什麼依賴
簡單分析下lib/main.dart
其實我們新建一個Flutter的移動端項目時的main.dart代碼和該demo中的main.dart代碼幾乎類似，但在開頭幾行還是有些不一樣的地方。
- Flutter for Mobile：
- Flutter for Desktop：
此代碼提供了一種覆蓋默認目標平臺的方法。這可以根據應用程序的要求使用。要了解更多相關信息，可以查看《Target Platform Override》
運行已經存在的Flutter項目
現在我們有了必要的配置文件和腳本。也走過了基本的配置流程，接下來我們就可以在桌面上運行幾乎任何已有的Flutter項目了。
有兩種方法可以實現上述需求：
- 我們可以將系統特定文件夾（linux，mac或windows）從example目錄複製到已有項目目錄（和andorid或ios目錄同級）並且在main.dart中按照上一節的區別修改部分代碼。
- 我們可以使用已有項目中的lib文件夾替換example目錄中的lib文件夾，並將pubspec.yaml文件替換為現有文件。
Flutter Community的Ayush Shekhar建議採用第二種方式，因為他在使用第一種方式遷移的時候經常出問題，不過我在運行的時候並沒有發現問題，所以因人而異吧。
之前做過一款名為“果核”的校園App，這是他運行在mac上的亞子。
Tips：我在使用Flutter for Desktop的時候發現了一個小Bug，就是拖動窗口調整大小時，窗口整體會出現紅色的閃爍。我猜可能是窗口繪製刷新導致的。
Flutter for Web
說完了Flutter for Mobile/Desktop，我們來請出今天的最後一位嘉賓，Flutter for Web。
與其說是Flutter for Web倒不如說是Dart for Web，從 Dart 這個語言誕生之初，它就一直在嘗試編譯成 JavaScript。谷歌怎麼想的，咱也不知道，咱也不敢問。在Flutter剛誕生的時候其實並沒有針對web的計劃，不過後來谷歌的工程師大筆一揮，乾脆重寫了新的dart:ui，這也就導致不可能將所有的Flutter代碼都運行到Web端（有些特性是平臺獨有的），因此這裡我們僅僅是跑通官方Demo。
安裝Dart SDK
篇幅原因，這裡就只給出在Mac上安裝Dart SDK的過程了。因為要開發web工程，我們還需要安裝 Dartium 和 Content Shell，好在Mac下的homebrew非常強大，這裡直接執行下面命令就可以了。
<code>brew tap dart-lang/dart
brew install dart --with-content-shell --with-dartium/<code>
如果覺得brew下載太慢的話，可以考慮更換中科大的鏡像源，只需執行下面的命令：
<code>替換brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
替換homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git/<code>
之後再執行brew install就會快很多了。
安裝完成後。在終端中執行下述命令來檢查Dart SDK的版本：
<code>brew info dart/<code>
安裝 flutter_web 開發工具包
由於Flutter for Web採用的庫和Flutter有所差異，所以我們還需要安裝webdev包，終端執行下面語句即可：
<code>flutter pub global activate webdev/<code>
確保$HOME/.pub-cache/bin路徑在你的環境變量中，這樣你就可以直接在終端中執行webdev命令了。
新建一個Flutter for Web項目
在VS Code中打開命令面板後輸入flutter web則會自動提示你讓你新建一個web程序，然後輸入項目名即可創建一個web項目。
然後執行flutter packages get即可安裝依賴。
啟動你的第一個web項目
現在來執行最後一個命令來運行項目：
<code>webdev serve/<code>
終端的輸出結果如下：
我們打開瀏覽器並輸入：http://127.0.0.1:8000，然後我們就可以在瀏覽器上看到神奇的結果了：
目前發現Firefox和Chrome均可運行，Safari無法顯示界面，原因還有待查找。
回顧代碼我們可以發現Flutter for Web項目的main.dart和普通的Flutter項目的代碼幾乎一致：
唯一的區別就是第一行中引入的fltter_web庫了。
因為對Flutter for Web我也沒過多瞭解，這一部分推薦你去查看官方文檔瞭解更多關於我們上面執行的命令或者網頁的信息。
總結
Flutter的發展勢頭和谷歌想要讓Flutter一統所有平臺的野心大家是有目共睹的，就在前不久，Fuchsia OS的官網也悄然上線，作為新系統的指定開發工具，Flutter自然備受關注。目前Flutter for Mobile已經發展的挺好了，雖然配置Desktop應用和Web應用時仍有些繁瑣，開發時仍會有許多bug，但冰凍三尺非一日之寒，我們應該給予足夠的耐心。
參考文章
- 在 macOS 上運行 Flutter 桌面端項目
- 在 macOS 上安裝和配置 Flutter 開發環境
- Flutter for Desktop: Create and Run a Desktop Application
- Getting started with Flutter Web
- Desktop Embedding for Flutter
- 在 Mac 安裝 Dart
閱讀更多 僱個城管打天下y 的文章
