兩個星期，用Flutter擼個APP
前言
Flutter是Google推出的跨平臺的解決方案，Slogan是“Design beautiful apps”，國內也有知名企業在使用和推廣，例如阿里、美團都有在嘗試。
個人對其中的一些特性，比如JIT、Material Design、快速開發等很感興趣，於是決定嘗試一下。
詩詞彙
於是誕生了詩詞彙APP，首先看一下是個什麼樣的APP。
接下來我們一步步從不同方面說說Flutter的開發。
開始
FLutter可以在Windows、Linux、Mac上進行開發，開發工具可以使用VS Code、Android+Studio/">Android Studio、IDEA等，本文推薦使用Android Studio，主要在於Android Studio提供了FLutter Inspector工具，可以實時審查元素，解決介面的顯示適配問題。
搭建開發環境
搭建環境的主要步驟：
-
下載SDK， ofollow,noindex" target="_blank">下載地址 。
-
配置PATH，如果使用Mac或者Linux系統，一定要將
bin目錄新增到系統PATH。 -
配置依賴源映象，這一步很重要，並且需要將指令碼放到啟動shell中。
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
配置編輯器
主要是給編輯器安裝相應的外掛。
VS Code安裝 Dart-Code.flutter" rel="nofollow,noindex" target="_blank">flutter外掛 ，Android Studio和IDEA需要安裝Flutter和Darter外掛。
其中Android Studio和IDEA基本一樣，跟VS Code的主要區別在於：
-
VS Code提供了更好的程式碼提示功能
-
IDEA提供了Flutter Inspector，可實時審查頁面元素
可根據個人喜好、習慣選擇使用。
推薦網站
在安裝、配置過程中，可參考以下中文資料：
主要技術點
Dart
Flutter專案的開發語言是Dart，Dart 是由 Google 開發的一種面嚮物件語言，可以編譯成 ARM 和 x86 程式碼直接執行在 iOS、Android 裝置上。
推薦先學習Dart語言 官方教程 ，對Dart有初步瞭解之後再進行Flutter的學習和開發。
介面開發
終於可以進入Flutter本身了。
Widget
Flutter中頁面所有元素都是Widget，又分為StatelessWidget和StatefulWidget。
顧名思義，StatelessWidget 就是指無可變狀態的 Widget，這類 Widget 的狀態只由建立 Widget 時傳入的引數決定，一旦建立，其狀態、在頁面上的展示效果也就不再改變。
而 StatefulWidget 內部則存在著可變狀態。當通過setState改變這些狀態時，Flutter 會重新渲染該 Widget。
佈局
在實際開發中，主要使用了Row、Column、Container、Expanded、Stack等。
Row、Column提供了水平、垂直方向的佈局，Stack提供了堆疊方式的佈局，各種容器有不同的特性，可根據實際頁面需求選擇搭配不同的佈局。
主要外掛
話題切回到詩詞彙APP，本APP收集了4000餘位詩人的30多萬首詩詞，提供了古詩詞的查詢、收藏、朗誦功能，並且實現了初步的社群功能。
專案目錄結構如下：
開發這個APP大概用了一個月的業餘時間，每天抽出一兩個小時，這樣折算為工作日，大概是兩個星期左右，開發效率還是很高的。
下面跟大家分享一下主要功能及所使用的一些外掛。
切換主題
為了實現實時切換主題顏色，使用了狀態管理外掛。
極光推送
在國內廠商中，極光是少有的對Flutter提供了技術支援的，這裡給極光大大的:+1:。
QQ的Flutter外掛提供了基本的登入、分享功能。
微信
微信的Flutter外掛提供的功能稍微豐富，包含了支付、登入、分享、啟動小程式的功能。
事件匯流排Event Bus
大名鼎鼎的event_bus也提供了對Flutter的支援。
音訊
錄音及播放音訊也有很好的支援。
其它
其它諸如載入HTML、Toast提示、圖片選擇器、圖片載入等也有較好的外掛支援。
可在 官方外掛庫 查詢相關的外掛。
坑
安裝、升級
FLutter的安裝、升級會經常遇到卡死的問題，主要原因就是使用了Google的源，但是莫名的，即使使用了科學上網、設定了國內映象後，也會遇到同樣的問題。只能通過反覆的 flutter doctor 或 flutter upgrade 直到解決問題。
開發
由於筆者最近一段時間Android專案做得較多，習慣了Android的XML佈局方式，對於在程式碼中編寫頁面的形式一開始還有些不習慣，但是在按照官方例子實踐了幾個頁面後，用程式碼寫頁面的優勢就體現出來了。
在頁面已經設計好的情況下，開發的時候腦海中就構思出一個Widget樹，從根節點到每一個節點一級一級巢狀下去，自然而然的佈局就寫好了。
Dialog彈出框
使用Dialog的時候，彈出Dialog的Context及Dialog本身都會壓入棧中，所以讓Dialog消失的方法是 Navigator.of(ctx).pop() ，這樣的設計既不同於Android也不同於iOS，也許跟Flutter本身所有元素都是Widget的設計有關。
編譯
在編譯Android版本的時候很順暢，沒有遇到任何問題。但是在編譯iOS版本的時候，遇到了很多問題，直到現在也沒有解決。
問題在於使用了 audio_recorder 和 flutter_qq 兩個外掛，而這兩個外掛一個要求編譯選項需要設定 !use_framework ，一個要求不能設定，造成了衝突，在實際編譯中一直編譯不通過。
結語
開發結束，最終打包了Release版本的APK，安裝到手機後，發現驚喜。
竟然如絲般順滑，這是我始料未及的，轉場效果、頁面相應速度不輸原生APP。
總而言之，個人對Flutter的前景相當看好，畢竟是Google大廠出品，並且專案本身的迭代速度很快，目前已經是0.11版本，期望在不遠的將來發布正式的1.0版本，更期望國內廠商加大對Flutter的支援力度。
**順便推廣一下筆者的詩詞彙APP，歡迎大家 下載試用 ，或者訪問 詩詞彙 體驗下Flutter如絲般的順滑。^_^**
