Flutter 實戰之南瓜屋故事App誕生記

2019-10-10 11:25:52 360技術

奇技指南

南瓜屋故事 App 是由360導航的前端團隊基於 Flutter 框架開發的一款真實故事創作與分享的內容型產品。

南瓜屋故事簡介

南瓜屋故事是360旗下的以真人、真事、真情為調性的故事社區。這是一個以真實故事為內核的用戶創作和分享平臺，用戶可以在這裡寫真實故事，看其他人的故事。它背靠360三大產品：導航、搜索、瀏覽器，擁有巨大流量入口和億級用戶。產品上線一年，沉澱4萬餘名作者，8萬多篇故事，200多萬註冊用戶。

南瓜屋故事 App誕生背景

南瓜屋故事在移動端的嘗試從小程序開始，但小程序存在留存低、微信內限制多等問題，使得我們開始考慮開發原生 App。

由於我們之前並沒有 App 開發團隊，只能由前端團隊來開發，針對這種情況選擇一款跨端的技術方案是必需的。

市面上有很多的跨端解決方案，但近兩年比較熱門的主要是 RN 和 Flutter。雖然 RN 對於前端來說比較熟悉，但其存在的一些性能瓶頸問題不可忽視；而 Flutter 在跨端的解決方案上面比較完美地規避了這些性能問題，只需要考慮上手門檻和社區的問題了。

我們在對 Flutter 進行了一些調研和學習之後，發現 Dart 語言跟 ES 還是有一些相似之處，上手並不困難；在社區方面 Flutter 近兩年也是特別活躍，從中我們看到了中國開發者的熱情和 Google 團隊對 Flutter 的重視程度，所以我們決定使用 Flutter 來開發南瓜屋故事 App。

下面我就從零開始總結一下使用 Flutter 開發南瓜屋故事APP的過程。

Flutter 簡介

Flutter 是 Google 開源的 UI 工具包，幫助開發者通過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面和嵌入式平臺。

Flutter 這兩年發展地非常迅猛，前兩週剛剛發佈了 1.9 版本。

安裝和環境配置

Flutter SDK

最重要的當然就是先下載 Flutter SDK。我們可以在 Flutter 官網上下載 SDK，目前的最新穩定版本是 v1.9.1。

下載後需要解壓並配置環境變量，環境變量配置好之後，我們還可以使用 Flutter precache 命令預下載開發二進制文件。

SDK 升級

Flutter 目前正保持著高速發展，版本發佈也比較頻繁，如果我們需要使用最新版本的 SDK，我們可以通過下面命令快速升級：

flutter upgrade

這個命令首先獲取你的 Flutter 渠道可用的最新的 Flutter SDK 版本。接著這個命令更新你 App 依賴的每一個 package，到最新的兼容版本。

如果你想使用一個更加新的 Flutter SDK 版本，切換到不太穩定的 Flutter 渠道，可以通過下面命令切換：

flutter channel

Flutter 目前有 4個發佈渠道，分別是 stable、 beta、 dev、和 master。

master 是最新的提交版本，可能會有一些問題；
dev 是經過全面測試的版本，會經常將 master 合併進來；
beta 每個月從 dev 獲取的最佳版本；
stable 是穩定渠道，大概一個季度發佈一次；

flutter doctor

flutter doctor 是一個非常好用的命令，這個命令可以幫助我們檢查當前環境並生成一份報告。包括 Flutter 和 Dart 的版本，還有當前環境存在的問題，並提供相應的解決方案。

平臺配置

目前我們 App 只需要運行在 Android 和 iOS 平臺，所以只需配置與此相關的環境，flutter doctor 可以幫助我們檢查本地環境的配置

開發工具

在開發工具支持上面 Flutter 做的也很友好，Android Studio / IntelliJ、Visual Studio Code 上都有很好用的插件支持。

尤其對於習慣使用 VS Code 的前端開發同學，不用切換編輯器就可以快速地進入開發啦～

項目開發

項目創建

Flutter 有四種創建項目的類型，分別是：

Flutter Application
Flutter Plugin
Flutter Package
Flutter Module

我們的 App 是一個全新的App，不需要考慮混合開發等問題，所以通過 Android Studio 創建，選擇 Flutter Application 即可。

項目結構

我們是前端團隊來開發 App，除了 Dart 的一些語言特性與 ES 比較像以外，在項目的代碼組織上也考慮到前端的開發習慣；

Widget

開始 Flutter 編程時，第一個要接觸的就是 Widget。Flutter 有 Everything is Widget 的思想，開始時我們接觸到的 Widget 其本都是一些佈局展示類的，比如 Text、Image、Button、Container、Row、Column 等；但如果需要實現設計師的頁面效果，則需要了解更多的 Widget，Flutter 官方為我們提供了非常多的實用 Widget。

南瓜屋項目就是以 MaterialApp 為項目的根 Widget，頁面展現及功能都通過官方 Widget 實現，在風格上做了一些定製。

插件

在項目緊，人員少的情況下，我們使用了社區內的一些優質插件，幫助我們能快速完成功能的開發，主要使用的一些插件如下：

dio （網絡庫）
cookie_jar （解決cookie問題）
fluro （路由）
flutter_html （富文本）
scoped_model（狀態管理）
shared_preferences （本地存儲）
flutter_webview_plugin （Webview）

還有一些就不一一列舉了，Flutter 的插件管理跟 Nodejs 非常像，提供方便的同時，也需要考慮安全等問題。

動畫

Flutter 提供兩種動畫形式：

補間動畫
基於物理基礎的動畫

在南瓜屋項目中，使用了補間動畫的一些能力，實現了下拉刷新、上拉加載更多等動畫效果

狀態管理

上面說插件時也提到了，南瓜屋項目使用了 scoped_model 這個狀態管理插件，我們前期也做過一些調研，在滿足需求的情況下，選擇了簡單易上手的 scoped_model；

scoped_model 主要使用了 Flutter 框架中 AnimateBuilder、Listenable、InheritedWidget 三個特性來實現；

南瓜屋項目根據頁面及功能拆分為多個狀態類，最終使用一個主類通過 with 語法合併，示例代碼如下：

原生通信

框架提供了三個與原生通信的方法：

BaseMessageChannel
EventChannel
MethodChannel

雖然南瓜屋項目是一個全新的純 Flutter 項目，但一些功能還是需要藉助公司內原有的通用 SDK，比如：用戶中心、PUSH、打點等。

這些 SDK 目前沒有 Flutter 版本或相應插件，所以採用在原生端接入，再通過 MethodChannel 與原生的通信，在 Flutter 側進行調用。

代碼調試

首先 Flutter 通過編輯器插件的方式為我們提供了類似瀏覽器中審查元素的功能，可以方便我們查看 Widget 樹的結構。

後期官方又推出了 Dart Devtools 這個工具，它可以審查元素，查看 App 性能指標等。

抓包

習慣了前端開發中使用瀏覽器的開發者工具查看網絡請求，意外的是 App 的一些 IDE 沒有提供抓包工具，這次開發中主要有兩個場景：

第一個場景可以使用 flutter_stetho 插件，在項目運行起來後，就可以在本機 chrome 的 chrome://inspect/ 中看到設備，再通過 network 查看網絡請求；

第二個場景是當使用 fiddler 進行代理抓包的時候發現並沒有任何網絡請求，經過一翻排查後發現是 Flutter 框架的網絡請求都是通過 httpClient 來實現的，這個 httpClient 實際並不會走系統的網絡代理，只能通過在 HttpClientCreate 的時候手動配置代理來解決。

使用Cookie

項目原有的一些服務端 Api 接口需要對請求中的 cookie 進行處理，在 Web 端中的請求會自動在請求頭中帶上本域的 Cookie，Flutter 中則不會。

為了複用之前的 Api 接口，通知 cookie_jar 來解決 cookie 的問題