我的Flutter學習與實踐 | 掘金技術徵文

zhujian1989發表於2018-07-23

如果你還在猶豫為什麼要學Flutter,下面2個圖的應該足夠吸引你加入了吧,一套程式碼多平臺使用

我的Flutter學習與實踐  | 掘金技術徵文

我的Flutter學習與實踐  | 掘金技術徵文

Flutter 是 Google 用以幫助開發者在 iOS 和 Android 兩個平臺開發高質量原生應用的全新移動 UI 框架。
Flutter又是谷歌欽定的下一代移動作業系統Fuchsia的UI框架。 作為一名Android Developer,看到是Google出的,且還能開發iOS,還是有必要學習下的!

最近通過學習Flutter,認識很多人,特別是後端的各種大佬也在瘋狂學習,作為移動端的我們亞歷山大!!!

本文主要講了我自己的一個學習過程以及使用感受,希望對正在學習Flutter的朋友有一定幫助,對想要入坑Flutter的朋友進行一些相關介紹

主要學習資料

  1. Flutter官網
  2. Flutter中文
  3. 線上Dart學習
  4. Tensor Programming
  5. DartConf 2018系列
  6. 閒魚技術

程式碼練習

  1. 選擇一個整片的時間進行學習編碼。
  2. 嘗試解決別人在群裡或者私信中提出的問題,後來學習的人越來越多,這一塊也成了我主要的程式碼練習塊。
  3. 從Github中的專案學習,主要是學習一些Flutter的編碼格式以及專案結構(之前被人吐槽過編碼格式不合理,查證後把不合理的程式碼格式重新寫了一次)

    學習程式碼已整理成Demo上傳到Github, 每一個知識點都有一個獨立的例子供參考:

    1.基礎佈局
    2.資料請求
    3.MVP實現
    4.上拉載入(監測到最底端直接重新整理,待優化),下拉重新整理
    5.主題學習
    6.路由
    7.drawer
    8.資料儲存三種方式(檔案,SharedPreference,sqflite)
    9.手勢
    10.圖片載入
    11.生命週期
    12.網路請求(dio,http,原生)
    13.多點觸控
    14.InheritedWidget
    15.TabBarView & TabBar ,切換的時候,每次都會執行initState。
    16.GlobalKey(簡單使用)
    17.國際化
    18.Notification自下而上傳遞資料
    19.顯示/隱藏widget
    20.drag
    21.Animation
    22.StreamController
    23.Business Logic Component
    24.Simple Redux & Simple BLoC

App實踐

zhrb.gif

學了那麼多基礎的知識,肯定要自己嘗試寫一個App,將知識點整合到一起使用。

完成

1.今日熱點
2.主題分類
3.文章詳情
4.抽屜列表增加快取, 防止多次拉去資料
5.評論列表
6.主題列表
7.主頁banner自動輪播,手指滑動是禁止輪播,放開則繼續
8.重新整理資料失敗,增加重試按鈕
9.分享UI,登入UI,聯動互動

待優化

1.Flutter載入Html

由於Api有限無法完成跟使用者相關的操作

1.註冊
2.登入
3.發表評論
4.收藏

Release_Android體驗包

原始碼已上傳到Github

學習&使用的感受

  1. 需要學習一門新的語言Dart,對於有移動端和前端開發基礎的人來說,不算很困難。
  2. 開發過程中Hot Reload大大的提高開發效率。
  3. 樹型佈局,需要轉變自己的佈局思維,一切都是widget,這個概念在在Flutter特別重要,因為在使用的過程中你需要展現給使用者的UI都是依靠各種型別的元件,通過組合的方式生成。
  4. 對於大家認為樹型佈局的巢狀層次較深,看起來極為不直觀的問題,只需要將一個複雜的佈局進行拆解,做成獨立的widget,然後再進行組裝,這樣不僅解決了閱讀程式碼不直觀的問題,而且也大大提高了widget的複用性。
  5. 對於網路請求的資料這一塊,如果伺服器返回的資料巢狀層次較多,會讓開發者會較多的時間去整理,封裝,寫解析體。
  6. 自己本身是做開發Android的,所以習慣的使用了MVP的模式,實踐專案寫完以後感覺有點笨重,可能需要摒棄一些移動端老的編碼觀念,在後續接觸到國外的一些開源專案,使用了的BLoC或者Redux,作為響應式框架,個人感覺這兩種架構比MVP更適合Flutter的開發。
  7. 開發的時候我們在debug模式下會稍顯示卡頓,後續做了個release包,分別在iOS和Android的真機上執行,從使用者體驗的角度去看,效能上幾乎和原生沒差別,是可以接受的。
  8. 實踐的專案分別打release包,iOS版有16.16M,Android版有8.02M,相對原生較大。
  9. 成熟輪子較少,官方或者大廠維護的外掛不多,例如第三方平臺登陸,支付,分享,國內地圖等,我們需要自己做外掛,這個就迫使我們目前需要掌握2種平臺的開發iOS和Android,這個學習成本就相對高一點。

從 0 到 1:我的 Flutter 技術實踐 | 掘金技術徵文,徵文活動正在進行中

相關文章