Flutter企業級專案實戰——博時App

| 前言

在當前大前端愈演愈烈的情況下，前有大名鼎鼎的QT、Facebook的RN、阿里的Weex，后有不斷追趕的Flutter及原生+H5混合開發，大家都想要在跨平臺這碗飯上奪取飯碗，在這種趨勢下，前端開發者會有一絲迷惘，到底是跟隨大家的腳步去學各種跨平臺技術，還是把當前的技術精以至精，專注于某一平臺！在學習各種技術之前，也有想過把時間花在看原始碼、學習他人成熟的框架，亦或是花時間寫出一款高性能的框架！

為什么要學習Flutter？

大家都在學習，都在不斷追趕，且相對來說跨平臺會比單平臺會更有競爭力，假如在當前的平臺情況不樂觀的情況下，還可以轉去其他平臺！對于中小企業來說，招聘一個跨平臺人員可以節省成本；對于開發者來說，你不學別人學，你不會別人會，還怎么去保持競爭力？
在學習Flutter之前，也使用過其他的跨平臺方案如RN，考慮是選擇RN還是Flutter，最終選擇Flutter的理由是：

• 使用Dart語言開發，效率高，和Java語言相似
• Flutter Widget 底層基于Skia繪制，性能強大、流暢
• 路由設計解決了原開發平臺導航的痛點
• 成熟的體系及框架
• 編譯速度快且帶有熱加載(雖然Android原生使用了模塊化，但是在合并后編譯及打包的時間是真的長)

與其他跨平臺方案的對比：

我的專案

專案預覽（Gif）：

專案預覽（PNG）：

資源下載：

• Github：https://github.com/jhflovehqy/flutter_bolg_manage
• 博時App下載：https://www.pgyer.com/blog
• API地址：https://www.wanandroid.com/blog/show/2
• 博時App二維碼下載：
  

專案簡介：

博時App是一款技術博客咨詢類軟體，專案有登錄、注冊、專案、積分排行榜、問題反饋、廣場、問答、搜索、技術類專案、收藏、歷史、個人資訊、關于、分享等模塊，

• 專案使用Getx框架作為狀態管理框架，能更高效的管理路由，回應式重繪Widget，最最最主要是無需背景關系，能在全域和模塊間共享狀態
• 符合Material Design界面設計風格，顏色更鮮艷，影片效果更加明顯，在圓角、陰影、影片、色彩搭配方面尤其突出
• 語言國際化，采用多語言，目前支持的有簡體中文、繁體中文、英文
• 請求介面使用Dio進行二次封裝，一行代碼完成介面請求，且有Dialog影片顯示、請求日志列印、例外決議、添加請求頭等功能
• 完美封裝上拉重繪，下拉加載等功能，且無需手動管理分頁、無需重復請求、可自動裝載，在不同狀態顯示不同的Widget，詳情可查看BaseGetPageController 和 RefreshWidget
• 良好的注釋風格，符合注釋規范
• 目錄層級清晰，模塊劃分可快速查找
• 基于Flutter2.0，支持空安全，無需后續升級

為什么使用Getx

• Fish Redux?

  在未使用Flutter之前，我只聽說過Flutter在閑魚團隊中廣泛使用，通過開啟顯示布局邊界也能看出閑魚APP的大部分頁面都使用了Flutter，在決定使用Flutter進行專案開發時，首選就是想使用閑魚Fish Redux狀態管理框架進行開發，了解了Fish Redux使用方法、優缺點后，通過插件生成模板代碼后是這樣的：
  
  我覺得對于中小型專案來說，使用Fish Redux反而是一種累贅，太多的結構分離只會使專案更加不好管理！且Fish Redux在Flutter2發布之后遲遲未支持空安全，穩定性不言而喻！

• Provider?
  Provider 通過觀察者模式來觸發Widget更新，確實能有效的進行狀態管理，但Provider太過于依賴context背景關系，非父子組件的狀態管理問題，需要通過發送事件總線通知或全域的方式來處理，

• MobX ?
  MobX也是基于觀察者模式，使用簡單快速上手，不會存在 Redux 頂級狀態管理難以分而治之的問題，但是MobX使用了大量注解且在編譯時生成代碼，會耗費大量的時間，

• Getx?
  Getx在眾多的Flutter狀態管理框架中并不是那么出名，但是在熟悉它的使用后立馬就認定了它，在逐漸認識的程序中，總結了它的優點：
  （1）輕量級，Getx分為Binding層、Controller層，且每一層負責的事務都清晰可見，
  （2）依賴注入，Binding負責把需要的物件進行依賴注入，也可以使用Get.lazyPut在使用時才進入注入，代碼層級可以完全分離，
  （3）路由導航，Getx重定義了Naviation的介面，使用更加簡單的方式進行導航傳值及路由回傳，且無須使用context背景關系，
  （4）使用方便、無侵入，在封裝了基類之后，基本上只需要繼承基類就行，無須在頂層套娃，且入手簡單，基本上了解之后使用起來比較容易上手，
  （5）性能，Getx的Binding層（注入層）系結了路由堆疊，當前堆疊在銷毀時，注入層會自動釋放物件，不需要手動釋放，不會造成堆積大量物件在記憶體中，
  （6）豐富的API，例如打開Dialog，無論你是否在Widget層中，都可以無需context使用Get.dialog來打開彈窗，

使用的第三方框架

  # rxdart https://pub.flutter-io.cn/packages/rxdart
  rxdart: ^0.27.1
  #GetX狀態管理框架 https://pub.flutter-io.cn/packages/get
  get: 4.3.7
  #toast https://pub.flutter-io.cn/packages/fluttertoast
  fluttertoast: ^8.0.8
  # 網路請求庫 https://github.com/flutterchina/dio
  dio: 4.0.0
  # 網路檢測 https://pub.flutter-io.cn/packages/connectivity
  connectivity: 3.0.6
  # 加載SVG圖片 https://pub.flutter-io.cn/packages/flutter_svg
  flutter_svg: 0.22.0
  # lottie影片 https://pub.flutter-io.cn/packages/flutter_lottie
  lottie: ^1.1.0
  # SP鍵值對存盤 https://pub.flutter-io.cn/packages/shared_preferences
  shared_preferences: ^2.0.6
  # WebView
  webview_flutter: ^2.0.12
  #讀取相冊
  image_picker: 0.8.3+3
  # https://github.com/flutter/plugins/tree/master/packages/url_launcher
  url_launcher: ^6.0.9
  #檔案路徑管理工具類
  path_provider: ^2.0.2
  #上拉重繪、下拉加載
  pull_to_refresh: ^2.0.0
  #加載html標簽
  flutter_html: ^2.1.2
  #呼叫分享平臺 https://pub.flutter-io.cn/packages/share
  share: ^2.0.4
  #圖片保存到本地 https://pub.flutter-io.cn/packages/image_gallery_saver
  image_gallery_saver: ^1.7.1
  #權限申請框架 https://pub.flutter-io.cn/packages/permission_handler
  permission_handler: ^8.1.6

專案結構

技術支持

• 首先，感謝鴻洋大佬提供的WanAndroid公共API介面，博時App使用了大部分介面來完善功能！
• Flutter中文網
• 感謝掘金的艾維碼大神的Flutter系列文章，讓我在各種狀態管理框架中一眼看中了Getx

總結

雖然博時APP不是特別完美，如部分細節未處理到位、不支持一鍵更換主題，但是它絕對是一個可快速入手的開源專案，在封裝Widget和網路請求、狀態沖突時，也花了不少心血去設計，在代碼注釋方面，也添加了不少注釋，挖了不少的坑，在使用Flutter開發專案時，也可以借鑒此專案來進行開發，能節省不少時間！后續會對博時APP進行更新維護！