近幾年，移動端跨平臺開發方案層出不窮，從Facebook開源ReactNative，到阿里跟進WEEX，前端技術在移動端跨平臺開發中大展身手，筆者作為一名Android開發者，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。筆者在2018年3月份有幸結識了Flutter，通過短暫的學習，進而開發了一款基於Flutter的開源中國客戶端App(原始碼：碼雲, GitHub)。2018年5月，Google IO大會召開後，Flutter在開發者中名氣越來越大，參與到Flutter開發中的開發者也越來越多，筆者遂萌生想法，希望用部落格記下開發基於Flutter的開源中國客戶端的過程，希望跟大家一起學習，一起進步！
Flutter簡介
Flutter是什麼
這是Flutter中文網上對於Flutter的介紹：
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。
Flutter的特性
快速開發
毫秒級的熱過載，修改後，您的應用介面會立即更新。使用豐富的、完全可定製的widget在幾分鐘內構建原生介面。
Flutter的熱過載可幫助您快速地進行測試、構建UI、新增功能並更快地修復錯誤。在iOS和Android模擬器或真機上可以在亞秒內過載，並且不會丟失狀態。
如果您是一名Android開發者，會發現在最初開發Android應用的時候，除錯Android應用是一個非常繁瑣的過程，經常是修改了某個地方的一點樣式，就得重新打包執行App，非常耗時，後面AndroidStudio才推出Instant Run功能，讓修改後的程式碼能快速預覽在真機或者模擬器上，今天我們做Flutter開發，完全可以不必擔心這種問題了，HotReload功能大大簡化了除錯應用的過程，修改了程式碼後，儲存（需要在AS中設定）或者點選Flutter Hot Reload按鈕，即可快速預覽出新的介面。
富有表現力和靈活的UI
快速釋出聚焦於原生體驗的功能。分層的架構允許您完全自定義，從而實現難以置信的快速渲染和富有表現力、靈活的設計。
使用Flutter內建美麗的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果和平臺感知，為您的使用者帶來全新體驗。
如果您是一名ReactNative或者WEEX開發者，會很清楚在構建App UI的時候，往往要寫很多的樣式，才能實現一個比較漂亮的使用者介面，而Flutter與之不同的是，Flutter內建了很多精美的元件，讓你通過簡短的一些程式碼，即可建立漂亮的UI。
原生效能
Flutter包含了許多核心的widget，如滾動、導航、圖示和字型等，這些都可以在iOS和Android上達到原生應用一樣的效能。
通過平臺相關的API、第三方SDK和原生程式碼讓您的應用變得強大易用。 Flutter允許您複用現有的Java、Swift或ObjC程式碼，訪問iOS和Android上的原生系統功能和系統SDK。
Flutter不同於Web App或者Hybrid App，使用Flutter開發的移動應用，完全是一個原生的App，擁有媲美原生應用的流暢體驗。
Flutter開發環境搭建
在Flutter中文網上，關於搭建開發環境的教程已經寫得比較詳細了，這裡筆者希望通過穿插一些圖片，讓各位初學Flutter的小夥伴能更輕鬆的搭建好開發環境，工欲善其事，必先利其器，下面就開始開發環境的搭建吧！
MacOS上搭建Flutter開發環境
1. 克隆Flutter程式碼
使用下面的命令克隆Flutter的程式碼：
git clone -b beta https://github.com/flutter/flutter.git
複製程式碼如果你的網路環境不太好，請使用工具科學上網，或者使用碼雲提供的映象，將上面的https://github.com/flutter/flutter.git改為碼雲的地址：https://gitee.com/mirrors/Flutter
2. 將Flutter程式碼的bin目錄加入到系統環境變數中
在終端中進入使用者目錄：
cd ~
複製程式碼使用下面的命令開啟.bash_profile檔案：
open .bash_profile
複製程式碼如果檔案不存在，就使用touch命令建立檔案並開啟：
touch .bash_profile
open .bash_profile
複製程式碼開啟.bash_profile檔案後，新增如下幾行：
export PATH=${PATH}:/Users/xxx/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼上面的第一行：
export PATH=${PATH}:/Users/xxx/flutter/bin:$PATH
複製程式碼需要注意的是將/Users/xxx/flutter更換為你自己本機的flutter目錄
第二行及第三行是在國內為了正常使用flutter相關的命令而新增的，具體說明可以參考這裡
修改完.bash_profile後，儲存並關閉該檔案，然後使用如下命令讓配置生效：
source .bash_profile
複製程式碼為了測試flutter環境變數是否配置成功，在終端中輸入flutter命令並回車，如果出現flutter命令相關用法提示，則表示flutter環境變數配置成功，如下圖所示：
3. 使用flutter doctor命令安裝其他依賴
flutter doctor是用於檢查flutter相關依賴有沒有正確安裝的命令，比如Android SDK是否安裝，Xcode是否安裝等，筆者的機器在執行flutter doctor後輸出如下：
4. 配置你的AndroidStudio，安裝相關外掛
上面3步搞定之後，你還需要配置一下你的AndroidStudio，由於Flutter開發的主要使用語言是Dart（關於Dart的基礎語法，可以參考我的第二篇部落格），所以你還需要為AndroidStudio新增支援Dart的外掛。
開啟你的AndroidStudio，使用Command + ，快捷鍵，或者點選左上角的Android Studio -> Preferences...選單，開啟AndroidStudio的設定介面，找到左側的Plugins選項，並分別輸入dart和flutter查詢並安裝外掛，如下圖所示：
Uninstall按鈕而不是Install按鈕，如果你沒有安裝，需要點選右側的Install按鈕。
安裝完外掛後，還需要配置DartSDK的路徑，在上面的設定對話方塊中，找到左側的Languages & Frameworks -> Dart，然後在右邊的Dart SDK path填入Dart SDK的路徑，該路徑就是最初我們clone flutter程式碼的目錄中的/bin/cache/dart-sdk目錄，如下圖所示：
Windows及Linux上配置開發環境
Windows及Linux上配置開發環境跟Mac上類似，都是clone程式碼，配置環境變數，執行flutter doctor，配置IDE這幾步，具體配置過程就不贅述了，大家可以參考Flutter中文網中的教程：
參考
- Flutter官網（英文）
- Flutter中文網
我的開源專案
- 基於Google Flutter的開源中國客戶端，希望大家給個Star支援一下，原始碼：
- 基於Flutter的俄羅斯方塊小遊戲，希望大家給個Star支援一下，原始碼：
| 上一篇 | 下一篇 |
|---|---|
| 基於Google Flutter的開源中國客戶端 支援Android與iOS | 掘金技術徵文 |
從0開始寫一個基於Flutter的開源中國客戶端（2） ——Dart語法基礎 |