千秋萬代，一統江湖——Flutter for All Screens

前言

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分支。執行以下程式碼即可：

flutter channel master
flutter upgrade
複製程式碼

現在我們再來執行：

flutter doctor
複製程式碼

應該是可以看到類似於下圖的結果（截至2019年7月1日）：

預設情況下，Flutter沒有啟用桌面支援。我們可以通過設定環境變數ENABLE_FLUTTER_DESKTOP = true來實現。

為此，我們需要在不同的終端中執行不同的命令（臨時生效）：

在macOS 或者 Linux上:

export ENABLE_FLUTTER_DESKTOP=true
複製程式碼

在 Windows 上:

PowerShell:

$env:ENABLE_FLUTTER_DESKTOP="true"
複製程式碼

CMD:

set ENABLE_FLUTTER_DESKTOP=true
複製程式碼

**Tips:**以上設定環境變數的方式是臨時的，只會在當前終端中生效，想要永久生效請自行配置系統的環境變數

現在我們來執行以下命令，來確保桌面裝置已經連線了。

flutter devices
複製程式碼

如果設定成功是會出現下面的結果的：

$ flutter devices
1 connected devices:

macOS  • macOS  • darwin-x64     • Mac OS X 10.14.5 18F203
複製程式碼

針對不同系統手動配置

時至今日，Flutter for Desktop仍然是一個實驗性功能，這意味著Flutter沒有工具支援，無法通過flutter create命令直接新建出一個桌面應用程式。因此，唯一的選擇是手動配置系統特定的檔案。值得慶幸的是，Google的Flutter團隊已經為我們做好了這件事。

不過在執行Flutter for Desktop之前，我們需要先針對Windows/MacOS進行手動配置（Linux的配置與MacOS類似）。

MacOS

執行flutter doctor -v，根據輸出資訊選擇我們需要安裝配置的包，Xcode的下載直接在Mac App Store下載即可，Xcode相關開發包的安裝直接執行下面的命令即可。

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
複製程式碼

然後通過輸入命令 sudo xcodebuild -license 來確保已經同意 Xcode 的許可協議。

這裡重點提一下CocoaPods的安裝配置。

CocoaPods是iOS開發、macOS開發中的包依賴管理工具，效果如Java中的Maven，nodejs的npm。

安裝只需執行以下命令：

sudo gem install cocoapods
複製程式碼

如果下載太慢可以更換一下國內源

gem sources --remove https://rubygems.org/
gem sources -a http://gems.ruby-china.com/
複製程式碼

然後我們需要對CocoaPods初始化，由於 CocoaPods 包有500兆左右的大小，直接執行pod setup會從 github 上 clone 得極其漫長，這裡給出解決方案。

依次執行下面的命令即可：

cd ~/.cocoapods/repos
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
pod setup
複製程式碼

Windows

感謝微軟爸爸提供的VS套件，很多開發環境通過Visual Studio直接安裝就可以了，如何下載安裝VS自行百度，安裝的時候記得選以下桌面開發的套件：

執行官方demo

根據不同系統配置好環境後，我們便可以開始執行Google團隊提供的Flutter for Desktop案例了。

在終端中執行下述命令：

git clone https://github.com/google/flutter-desktop-embedding.git
cd example
複製程式碼

example資料夾是這個demo的示例應用程式，它具有所有必需的構建指令碼，這些指令碼在MacOS，Windows和Linux上執行Flutter是必需的。如果我們在VS Code中開啟示例資料夾，我們將能夠看到如下內容：

lib/main.dart是整個flutter專案的啟動檔案，這裡我們無需過多關注linux/macos/windows裡面的內容。

接下來在example目錄下執行下面命令來獲取專案所需要的依賴檔案

flutter packages get
複製程式碼

在我們開始執行我們的應用程式之前，還有最後一步。雖然我們之前已經配置好了Flutter的開發環境，但是由於桌面開發仍有一些配置項是不一樣的，所以我們需要執行下面一個命令來確保所有需要的依賴都被安裝成功了。

flutter precache --macos
複製程式碼

根據你自己的系統切換所需的該命令之後的引數。

現在我們可以將我們的Flutter應用程式作為桌面應用程式執行了。

在終端執行：

flutter run
複製程式碼

終端輸出的結果應該是類似下面這樣的：

執行起來的結果應該如下圖所示：

是不是和之前的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專案了。

有兩種方法可以實現上述需求：

1. 我們可以將系統特定資料夾（linux，mac或windows）從example目錄複製到已有專案目錄（和andorid或ios目錄同級）並且在main.dart中按照上一節的區別修改部分程式碼。
2. 我們可以使用已有專案中的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非常強大，這裡直接執行下面命令就可以了。

brew tap dart-lang/dart
brew install dart --with-content-shell --with-dartium
複製程式碼

如果覺得brew下載太慢的話，可以考慮更換中科大的映象源，只需執行下面的命令：

替換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
複製程式碼

之後再執行brew install就會快很多了。

安裝完成後。在終端中執行下述命令來檢查Dart SDK的版本：

brew info dart
複製程式碼

安裝 flutter_web 開發工具包

由於Flutter for Web採用的庫和Flutter有所差異，所以我們還需要安裝webdev包，終端執行下面語句即可：

flutter pub global activate webdev
複製程式碼

確保$HOME/.pub-cache/bin路徑在你的環境變數中，這樣你就可以直接在終端中執行webdev命令了。

新建一個Flutter for Web專案

在VS Code中開啟命令皮膚後輸入flutter web則會自動提示你讓你新建一個web程式，然後輸入專案名即可建立一個web專案。

然後執行flutter packages get即可安裝依賴。

啟動你的第一個web專案

現在來執行最後一個命令來執行專案：

webdev serve
複製程式碼

終端的輸出結果如下：

我們開啟瀏覽器並輸入：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，但冰凍三尺非一日之寒，我們應該給予足夠的耐心。

參考文章

1. 在 macOS 上執行 Flutter 桌面端專案
2. 在 macOS 上安裝和配置 Flutter 開發環境
3. Flutter for Desktop: Create and Run a Desktop Application
4. Getting started with Flutter Web
5. Desktop Embedding for Flutter
6. 在 Mac 安裝 Dart

---