Flutter入门实战教程:从0到1仿写web版掘金App (完结)
前言
准确的说,这是去年十一月份就写好的教程,
虽然迟迟未上线(拖了半年),但是非常感谢购买的老铁们~
虽然心中很不爽,
但是回头想想,也是的确写的比较仓促,但是当时自己在写的过程中,的确能学到很多东西,所以很想分享出来,至于说内容不过关,我也无话可说,也非常接受不上线的结果。虽然我并不能确定,在去年,这位运营小哥所说的该如何写是否真的知道 Flutter 应有的学习路线。
即便如此,有各种老铁们的支持,还是心里面还是暖暖的。
掘金是一个很好的平台,合作的过程中虽然发生的不愉快,但是依旧不妨碍分享呀~
运行效果
正文
这里我也是直接拿小册介绍来了
作者介绍
前环球网全栈开发工程师,现某厂高级前端工程师。技术主要涉猎pc及无线。
GitHub上千star项目《React-Express-Blog-Demo》作者,环球网新版官方Android客户端第一版主要开发者
Alibaba/FlutterGo 主要开发者
热爱技术,热爱分享。一起学习,一起进步
- GitHub地址:https://github.com/Nealyang
介绍
之前有介绍过关于flutter的入门文章:flutter从入门到寄几玩儿,文章底部写到会继续写demo给大家练习。由于之前在GitHub上写过类似React练习项目:React-Express-Blog-Demo ,所以最近笔者也一直在思考,是否可以同样,用flutter一步一步来带领大家一起学习使用fluter呢。
技术终归就是工具,没有实操是绝对的纸上谈兵。鉴于网上太多关于flutter的系列入门文章,其中有掘金翻译的fluter中文网其实就是一个很好的入门资料。
讲了这么多,我们这里稍微介绍下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统计来的数据
回到这本小册,笔者将从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届小鲜肉加入我们!
快快扫码加入我们吧~~
扫描下方二维码,内推直通车!!!