兩個星期，用Flutter擼個APP

前言

Flutter是Google推出的跨平臺的解決方案，Slogan是「Design beautiful apps」，國內也有知名企業在使用和推廣，例如阿里、美團都有在嘗試。

我的對其中的一些特性，好比JIT、Material Design、快速開發等很感興趣，因而決定嘗試一下。

詩詞彙

因而誕生了詩詞彙APP，首先看一下是個什麼樣的APP。

接下來咱們一步步從不一樣方面說說Flutter的開發。

開始

FLutter能夠在Windows、Linux、Mac上進行開發，開發工具可使用VS Code、Android Studio、IDEA等，本文推薦使用Android Studio，主要在於Android Studio提供了FLutter Inspector工具，能夠實時審查元素，解決界面的顯示適配問題。

搭建開發環境

搭建環境的主要步驟：

1. 下載SDK，下載地址。

2. 配置PATH，若是使用Mac或者Linux系統，必定要將bin目錄添加到系統PATH。

3. 配置依賴源鏡像，這一步很重要，而且須要將腳本放到啓動shell中。

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1. 執行flutter doctor，這一步耗時會很長，須要耐心等耐。

2. 安卓開發工具及插件，配置編輯器。

配置編輯器

主要是給編輯器安裝相應的插件。

VS Code安裝flutter插件，Android Studio和IDEA須要安裝Flutter和Darter插件。

其中Android Studio和IDEA基本同樣，跟VS Code的主要區別在於：

1. VS Code提供了更好的代碼提示功能

2. IDEA提供了Flutter Inspector，可實時審查頁面元素

可根據我的喜愛、習慣選擇使用。

推薦網站

在安裝、配置過程當中，可參考如下中文資料：

Flutter中國

Flutter中文文檔

主要技術點

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_redux 。

極光推送

在國內廠商中，極光是少有的對Flutter提供了技術支持的，這裏給極光大大的👍。

jpush_flutter

QQ

QQ的Flutter插件提供了基本的登陸、分享功能。

flutter_qq

微信

微信的Flutter插件提供的功能稍微豐富，包含了支付、登陸、分享、啓動小程序的功能。

fluwx

事件總線Event Bus

大名鼎鼎的event_bus也提供了對Flutter的支持。

event_bus

音頻

錄音及播放音頻也有很好的支持。

audio_recorder

audioplayer2

其它

其它諸如加載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如絲般的順滑。^_^**

有須要作Fluuter APP的能夠直接發我消息哦，你們試用小程序的時候順便點下廣告，就當是支持我咯。（謝謝🙏）