flutter 仿网易严选(一)
学习flutter已经有一段时间了,年底刚好有一段时间可以自己安排,准备仿一个网易严选小程序练习练习,(为啥不直接仿app,因为不给抓包..,小程序和app在页面布局上差别并不大)。开始写代码前需要做前期工作,分别是这几件事情:
1.项目创建(我这里用的是vscode,安装fluttter这些不赘述,网上都有)
2.理清项目结构,除了ui层可以分为网络、provide(状态管理)、router路由,images(资源),基本有这些就可以开始写了。
网络层创建了一个api类和请求类(封装了一下dio的请求方法和返回数据自定义解析)。
router层使用了fluro进行了路由路径和hander的绑定。
images存放图片和字体等资源文件。
provide存放状态管理类。
3.导入常用的package,在pubspec.yaml文件的dependencies下加入。
image.png
这些是我常用的package:
dio:强大且常用的网络库;
flutter_swiper:轮播图
flutter_screenutil:屏幕适配,根据UI图标注对不同尺寸的机型进行适配
url_launcher:实现ios安卓上拨打电话、打开网址和跳转第三方应用
flutter_easyrefresh:简单、可自定义的上拉加载、下拉刷新
provider:谷歌官方出的状态管理
fluttertoast:简单的toast
fluro:路由管理
shared_preferences:ios和安卓的本地轻量级存储
4.创建页面的文件结构:
image.png
分为首页,分类,购物车,个人中心四大块,main是入口文件,index.dart作为MaterialApp的home,主要功能就是创建底部导航栏和初始化四个主页面,跟iOS中的UITabBarController功能类似。
全部搞完之后,运行iOS或者安卓模拟器
iOS.png
第一篇链接:flutter仿网易严选(一)
第二篇链接:flutter仿网易严选(二)
第三篇链接:flutter仿网易严选(三)
第四篇链接:flutter仿网易严选(四)