如果你還在猶豫為什麼要學Flutter,下面2個圖的應該足夠吸引你加入了吧,一套程式碼多平臺使用
Flutter 是 Google 用以幫助開發者在 iOS 和 Android 兩個平臺開發高質量原生應用的全新移動 UI 框架。
Flutter又是谷歌欽定的下一代移動作業系統Fuchsia的UI框架。
作為一名Android Developer,看到是Google出的,且還能開發iOS,還是有必要學習下的!
最近通過學習Flutter,認識很多人,特別是後端的各種大佬也在瘋狂學習,作為移動端的我們亞歷山大!!!
本文主要講了我自己的一個學習過程以及使用感受,希望對正在學習Flutter的朋友有一定幫助,對想要入坑Flutter的朋友進行一些相關介紹
主要學習資料
程式碼練習
- 選擇一個整片的時間進行學習編碼。
- 嘗試解決別人在群裡或者私信中提出的問題,後來學習的人越來越多,這一塊也成了我主要的程式碼練習塊。
- 從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實踐
學了那麼多基礎的知識,肯定要自己嘗試寫一個App,將知識點整合到一起使用。
完成
1.今日熱點
2.主題分類
3.文章詳情
4.抽屜列表增加快取, 防止多次拉去資料
5.評論列表
6.主題列表
7.主頁banner自動輪播,手指滑動是禁止輪播,放開則繼續
8.重新整理資料失敗,增加重試按鈕
9.分享UI,登入UI,聯動互動
待優化
1.Flutter載入Html
由於Api有限無法完成跟使用者相關的操作
1.註冊
2.登入
3.發表評論
4.收藏
Release_Android體驗包
原始碼已上傳到Github
學習&使用的感受
- 需要學習一門新的語言Dart,對於有移動端和前端開發基礎的人來說,不算很困難。
- 開發過程中Hot Reload大大的提高開發效率。
- 樹型佈局,需要轉變自己的佈局思維,一切都是widget,這個概念在在Flutter特別重要,因為在使用的過程中你需要展現給使用者的UI都是依靠各種型別的元件,通過組合的方式生成。
- 對於大家認為樹型佈局的巢狀層次較深,看起來極為不直觀的問題,只需要將一個複雜的佈局進行拆解,做成獨立的widget,然後再進行組裝,這樣不僅解決了閱讀程式碼不直觀的問題,而且也大大提高了widget的複用性。
- 對於網路請求的資料這一塊,如果伺服器返回的資料巢狀層次較多,會讓開發者會較多的時間去整理,封裝,寫解析體。
- 自己本身是做開發Android的,所以習慣的使用了MVP的模式,實踐專案寫完以後感覺有點笨重,可能需要摒棄一些移動端老的編碼觀念,在後續接觸到國外的一些開源專案,使用了的BLoC或者Redux,作為響應式框架,個人感覺這兩種架構比MVP更適合Flutter的開發。
- 開發的時候我們在debug模式下會稍顯示卡頓,後續做了個release包,分別在iOS和Android的真機上執行,從使用者體驗的角度去看,效能上幾乎和原生沒差別,是可以接受的。
- 實踐的專案分別打release包,iOS版有16.16M,Android版有8.02M,相對原生較大。
- 成熟輪子較少,官方或者大廠維護的外掛不多,例如第三方平臺登陸,支付,分享,國內地圖等,我們需要自己做外掛,這個就迫使我們目前需要掌握2種平臺的開發iOS和Android,這個學習成本就相對高一點。