兩個(gè)星期，用Flutter擼個(gè)APP
前言
Flutter是Google推出的跨平臺(tái)的解決方案，Slogan是“Design beautiful apps”，國(guó)內(nèi)也有知名企業(yè)在使用和推廣，例如阿里、美團(tuán)都有在嘗試。
個(gè)人對(duì)其中的一些特性，比如JIT、Material Design、快速開(kāi)發(fā)等很感興趣，于是決定嘗試一下。
于是誕生了詩(shī)詞匯APP，首先看一下是個(gè)什么樣的APP。
接下來(lái)我們一步步從不同方面說(shuō)說(shuō)Flutter的開(kāi)發(fā)。
開(kāi)始
FLutter可以在Windows、Linux、Mac上進(jìn)行開(kāi)發(fā)，開(kāi)發(fā)工具可以使用VS Code、Android Studio、IDEA等，本文推薦使用Android Studio，主要在于Android Studio提供了FLutter Inspector工具，可以實(shí)時(shí)審查元素，解決界面的顯示適配問(wèn)題。
搭建開(kāi)發(fā)環(huán)境
搭建環(huán)境的主要步驟：
- 下載SDK，下載地址。
- 配置PATH，如果使用Mac或者Linux系統(tǒng)，一定要將bin目錄添加到系統(tǒng)PATH。
- 配置依賴(lài)源鏡像，這一步很重要，并且需要將腳本放到啟動(dòng)shell中。
- export PUB_HOSTED_URL=https://pub.flutter-io.cn
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 執(zhí)行flutter doctor，這一步耗時(shí)會(huì)很長(zhǎng)，需要耐心等耐。
- 安卓開(kāi)發(fā)工具及插件，配置編輯器。
配置編輯器
主要是給編輯器安裝相應(yīng)的插件。
VS Code安裝flutter插件，Android Studio和IDEA需要安裝Flutter和Darter插件。
其中Android Studio和IDEA基本一樣，跟VS Code的主要區(qū)別在于：
- VS Code提供了更好的代碼提示功能
- IDEA提供了Flutter Inspector，可實(shí)時(shí)審查頁(yè)面元素
可根據(jù)個(gè)人喜好、習(xí)慣選擇使用。
推薦網(wǎng)站
在安裝、配置過(guò)程中，可參考以下中文資料：
Flutter中國(guó)
Flutter中文文檔
主要技術(shù)點(diǎn)
Dart
Flutter項(xiàng)目的開(kāi)發(fā)語(yǔ)言是Dart，Dart 是由 Google 開(kāi)發(fā)的一種面向?qū)ο笳Z(yǔ)言，可以編譯成 ARM 和 x86 代碼直接運(yùn)行在 iOS、Android 設(shè)備上。
推薦先學(xué)習(xí)Dart語(yǔ)言官方教程，對(duì)Dart有初步了解之后再進(jìn)行Flutter的學(xué)習(xí)和開(kāi)發(fā)。
界面開(kāi)發(fā)
終于可以進(jìn)入Flutter本身了。
Widget
Flutter中頁(yè)面所有元素都是Widget，又分為StatelessWidget和StatefulWidget。
顧名思義，StatelessWidget 就是指無(wú)可變狀態(tài)的 Widget，這類(lèi) Widget 的狀態(tài)只由創(chuàng)建 Widget 時(shí)傳入的參數(shù)決定，一旦創(chuàng)建，其狀態(tài)、在頁(yè)面上的展示效果也就不再改變。
而 StatefulWidget 內(nèi)部則存在著可變狀態(tài)。當(dāng)通過(guò)setState改變這些狀態(tài)時(shí)，F(xiàn)lutter 會(huì)重新渲染該 Widget。
布局
在實(shí)際開(kāi)發(fā)中，主要使用了Row、Column、Container、Expanded、Stack等。
Row、Column提供了水平、垂直方向的布局，Stack提供了堆疊方式的布局，各種容器有不同的特性，可根據(jù)實(shí)際頁(yè)面需求選擇搭配不同的布局。
推薦學(xué)習(xí) 官方文檔 及 國(guó)內(nèi)維護(hù)的中文翻譯。
主要插件
話題切回到詩(shī)詞匯APP，本APP收集了4000余位詩(shī)人的30多萬(wàn)首詩(shī)詞，提供了古詩(shī)詞的查詢(xún)、收藏、朗誦功能，并且實(shí)現(xiàn)了初步的社區(qū)功能。
項(xiàng)目目錄結(jié)構(gòu)如下：
開(kāi)發(fā)這個(gè)APP大概用了一個(gè)月的業(yè)余時(shí)間，每天抽出一兩個(gè)小時(shí)，這樣折算為工作日，大概是兩個(gè)星期左右，開(kāi)發(fā)效率還是很高的。
下面跟大家分享一下主要功能及所使用的一些插件。
切換主題
為了實(shí)現(xiàn)實(shí)時(shí)切換主題顏色，使用了狀態(tài)管理插件。
flutter_redux 。
極光推送
在國(guó)內(nèi)廠商中，極光是少有的對(duì)Flutter提供了技術(shù)支持的，這里給極光大大的。
jpush_flutter
QQ的Flutter插件提供了基本的登錄、分享功能。
flutter_qq
微信
微信的Flutter插件提供的功能稍微豐富，包含了支付、登錄、分享、啟動(dòng)小程序的功能。
fluwx
事件總線Event Bus
大名鼎鼎的event_bus也提供了對(duì)Flutter的支持。
event_bus
音頻
錄音及播放音頻也有很好的支持。
audio_recorder audioplayer2
其它
其它諸如加載HTML、Toast提示、圖片選擇器、圖片加載等也有較好的插件支持。
可在 官方插件庫(kù) 查詢(xún)相關(guān)的插件。
坑
安裝、升級(jí)
FLutter的安裝、升級(jí)會(huì)經(jīng)常遇到卡死的問(wèn)題，主要原因就是使用了Google的源，但是莫名的，即使使用了科學(xué)上網(wǎng)、設(shè)置了國(guó)內(nèi)鏡像后，也會(huì)遇到同樣的問(wèn)題。只能通過(guò)反復(fù)的flutter doctor 或 flutter upgrade直到解決問(wèn)題。
開(kāi)發(fā)
由于筆者最近一段時(shí)間Android項(xiàng)目做得較多，習(xí)慣了Android的XML布局方式，對(duì)于在代碼中編寫(xiě)頁(yè)面的形式一開(kāi)始還有些不習(xí)慣，但是在按照官方例子實(shí)踐了幾個(gè)頁(yè)面后，用代碼寫(xiě)頁(yè)面的優(yōu)勢(shì)就體現(xiàn)出來(lái)了。
在頁(yè)面已經(jīng)設(shè)計(jì)好的情況下，開(kāi)發(fā)的時(shí)候腦海中就構(gòu)思出一個(gè)Widget樹(shù)，從根節(jié)點(diǎn)到每一個(gè)節(jié)點(diǎn)一級(jí)一級(jí)嵌套下去，自然而然的布局就寫(xiě)好了。
Dialog彈出框
使用Dialog的時(shí)候，彈出Dialog的Context及Dialog本身都會(huì)壓入棧中，所以讓Dialog消失的方法是Navigator.of(ctx).pop()，這樣的設(shè)計(jì)既不同于Android也不同于iOS，也許跟Flutter本身所有元素都是Widget的設(shè)計(jì)有關(guān)。
編譯
在編譯Android版本的時(shí)候很順暢，沒(méi)有遇到任何問(wèn)題。但是在編譯iOS版本的時(shí)候，遇到了很多問(wèn)題，直到現(xiàn)在也沒(méi)有解決。
問(wèn)題在于使用了audio_recorder和flutter_qq兩個(gè)插件，而這兩個(gè)插件一個(gè)要求編譯選項(xiàng)需要設(shè)置!use_framework，一個(gè)要求不能設(shè)置，造成了沖突，在實(shí)際編譯中一直編譯不通過(guò)。
結(jié)語(yǔ)
開(kāi)發(fā)結(jié)束，最終打包了Release版本的APK，安裝到手機(jī)后，發(fā)現(xiàn)驚喜。
竟然如絲般順滑，這是我始料未及的，轉(zhuǎn)場(chǎng)效果、頁(yè)面相應(yīng)速度不輸原生APP。
總而言之，個(gè)人對(duì)Flutter的前景相當(dāng)看好，畢竟是Google大廠出品，并且項(xiàng)目本身的迭代速度很快，目前已經(jīng)是0.11版本，期望在不遠(yuǎn)的將來(lái)發(fā)布正式的1.0版本，更期望國(guó)內(nèi)廠商加大對(duì)Flutter的支持力度。
