一統江湖？——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

---