奇技指南

南瓜屋故事 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 ApplicationFlutter PluginFlutter PackageFlutter 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 語法合併，示例程式碼如下：

原生通訊

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

BaseMessageChannelEventChannelMethodChannel

雖然南瓜屋專案是一個全新的純 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 的問題

南瓜屋故事APP展示

<< 滑動檢視下一張圖片 >>

南瓜屋故事App作為一款使用純 Flutter 開發的精美應用，在前不久的2019 Google 開發者大會上被官方展示。

南瓜屋故事APP目前已經上架安卓各大應用商店

總結

前期專案都是在 Android 環境下開發測試的，完成之後在 iOS 環境下執行的時候，發現完美適配，多少有一點點小意外。

還有就是想一想前端同學在進入到原生開發，如果沒有熱過載機制，一次修改要編譯3分鐘才能看效果，那估計就是從入門到放棄了。

通過這個專案的實踐，對於前端同學來講，Flutter 比 RN 更要容易上手，加上它在效能上的優勢，在沒有原生開發經驗，想通過跨端方案來節約一些開發和學習成本的時候，Flutter 是一個不錯的選擇。