Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

Neal_yang發表於2019-03-19

前言

準確的說,這是去年十一月份就寫好的教程,

Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

雖然遲遲未上線(拖了半年),但是非常感謝購買的老鐵們~

雖然心中很不爽,

Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

但是回頭想想,也是的確寫的比較倉促,但是當時自己在寫的過程中,的確能學到很多東西,所以很想分享出來,至於說內容不過關,我也無話可說,也非常接受不上線的結果。雖然我並不能確定,在去年,這位運營小哥所說的該如何寫是否真的知道 Flutter 應有的學習路線。

即便如此,有各種老鐵們的支援,還是心裡面還是暖暖的。

Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

掘金是一個很好的平臺,合作的過程中雖然發生的不愉快,但是依舊不妨礙分享呀~

執行效果

img

正文

這裡我也是直接拿小冊介紹來了

作者介紹

前環球網全棧開發工程師,現某廠高階前端工程師。技術主要涉獵pc及無線。

GitHub上千star專案《React-Express-Blog-Demo》作者,環球網新版官方Android客戶端第一版主要開發者

Alibaba/FlutterGo 主要開發者

熱愛技術,熱愛分享。一起學習,一起進步

介紹

之前有介紹過關於flutter的入門文章:flutter從入門到寄幾玩兒,文章底部寫到會繼續寫demo給大家練習。由於之前在GitHub上寫過類似React練習專案:React-Express-Blog-Demo ,所以最近筆者也一直在思考,是否可以同樣,用flutter一步一步來帶領大家一起學習使用fluter呢。

技術終歸就是工具,沒有實操是絕對的紙上談兵。鑑於網上太多關於flutter的系列入門文章,其中有掘金翻譯的fluter中文網其實就是一個很好的入門資料。

flutter

講了這麼多,我們這裡稍微介紹下flutter。2018年6月21日Google釋出Flutter首個release預覽版,作為Google baba大力推出的一種全新的響應式,跨平臺,高效能的移動開發框架。Flutter是一個跨平臺的移動UI框架,旨在幫助開發者使用一套程式碼開發高效能、高保真的Android和iOS應用。

flutter優點主要包括:

  • 跨平臺
  • 開源
  • Hot Reload、響應式框架、及其豐富的控制元件以及開發工具
  • 靈活的介面設計以及控制元件組合
  • 藉助可以移植的GPU加速的渲染引擎以及高效能ARM程式碼執行時已達到高質量的使用者體驗

而且,他是Google BaBa開源的,並且目前阿里巴巴集團內部也是flutter風氣正茂,所以我們完全有理由相信flutter未來,一定會有自己的舞臺。

下圖來自developers.googleblog.com官網從StackOverflow統計來的資料

img

回到這本小冊,筆者將從flutter基礎到一步一步實現web版掘金來帶大家感受flutter的魅力。旨在讓大家熟練使用flutter來完成自己想做的APP開發。當然,筆者深知授人魚不如授人以漁。所以文章中,會介紹筆者遇到的問題,以及思考的過程。方便大家借鑑與思考。

實戰專案並非 1:1 還原web版掘金,小冊旨在帶領大家使用flutter完成App開發,解決問題思路以及widget查詢、使用的介紹。對於flutter的環境搭建以及後續的上線並未涉及。後面可加群一起討論。文章隨著專案的編寫,一邊開發一遍寫文章,後面開發過程中可能會遇到之前不合理的地方可能會回頭修改編寫~

你會學到什麼?

  • 入門flutter、學習Dart ,掌握一門新技術
  • 掌握flutter、dart中開發技巧以及解決問題的方式
  • 常用Widget的使用並可獨立完成介面編寫
  • flutter中路由的使用以及flutter package的查詢和使用
  • 學會網路請求、上拉重新整理等常規App具有的功能開發
  • 獨立開發App

適宜人群

  • 前端、客戶端開發者
  • 有一定的程式設計基礎且看過flutter官網基礎教程
  • 有激情、有熱情、願意花時間去探索新知識

教程內容

全篇地址:Nealyang/personalBlog

專案原始碼地址:Nealyang/flutter

Flutter入門實戰:從0到1仿寫web版掘金App

Dart基礎介紹

flutter入門以及常用Widget介紹

專案框架搭建

“flutter”資料model及json處理

首頁List UI編寫

fluro介紹以及路由配置

網路請求

下拉重新整理 & 載入更多

webView for Detail

駐足思考、總結

沸點 UI & 功能 編寫(上)

沸點 UI & 功能 編寫(下)

小冊 UI & 功能 編寫

開源庫、活動 UI & 功能 編寫

登陸功能 & App響應

感言

再次感謝支援我的小夥伴~

招聘

國際慣例,總是要來一波廣告的嘛~~

阿里巴巴春招開始啦~歡迎各路2020屆小鮮肉加入我們!

Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

快快掃碼加入我們吧~~

掃描下方二維碼,內推直通車!!!

Flutter入門實戰教程:從0到1仿寫web版掘金App (完結)

相關文章