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仿网易严选（四）

终：源码地址在我的github：WXYX_HC。，有什么问题可以在评论处留言，多多交流。