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

奇技指南 南瓜屋故事 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 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 的問題

南瓜屋故事APP展現

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

南瓜屋故事APP目前已經上架安卓各大應用商店 歡迎掃碼下載、試用、吐槽鴨~~

總結

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

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

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

相關推薦

• Flutter從加載到顯示
• Flutter dart:io 庫
• Flutter Platform View 使用及原理簡析
• Flutter Platform Channel 使用與源碼分析

（360技術原創內容，轉載請務必保留文末二維碼，謝謝~）

關於360技術 360技術是360技術團隊打造的技術分享公衆號，天天推送技術乾貨內容 更多技術信息歡迎關注「360技術」微信公衆號