Flutter开发学习实战之商城项目（后端+Flutter端）_flutter 商城-程序员宅基地

Flutter_mall 商城项目

引言：

此Flutter工程项目是在学习 youxinLu 大佬写的一个商城项目:

作者项目简介：

Flutter_Mall是一款Flutter开源在线商城应用程序，是基于litemall基础上进行开发，litemall包含了Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端感兴趣的同学可以自行研究部署，Flutter_Mall基本上包含了litemall中小程序的功能。

学习的最好方法就是动手实践：于是将 youxinLu 大佬的项目亲手撸了一遍（原项目因为版本不一致本地一直编译报错），对 Flutter 项目的架构和基础组Widget的使用有了更深刻的认识，对自己写 Flutter 项目有很大的启发和帮助。

1. 项目截图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZth1ZtZ-1637758416152)(../pic/image-20211124201823121.png)]

在这里插入图片描述

2. 搭建本地服务器

后端项目部署参考文档，很完整的一个开源项目，给作者点赞：https://linlinjava.gitbook.io/litemall

可参考博客：移动开发搭建本地商城接口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T8a6GPul-1637758416159)(../pic/image-20211123170946720.png)]

如果本地搭建有问题，我将后端接口部署到了服务器，有需要调试的可以使用一下，因为不太懂后端项目的部署，可能服务器会死掉，每天会及时看看服务器情况。

服务器地址：http://1.15.170.123:8080/
建议搭建一个本地服务器，步骤比较简单，当接口出问题时候，可以用IDEA调试后端代码。

3. 项目代码

Flutter mall 原始项目我本地实在是编译不过，作者的服务器接口好像请求不了。
学习代码的最好方法就是手撸，写多了就会了~

项目用到的 Flutter 插件库：

名称	作用
flutter_swipe	轮播图
dio	网络框架
flutter_spinkit	旋转组件
event_bus	事件通知
flutter_html	html框架
flutter_screenutil	屏幕适配
fluttertoast	Toast
shared_preferences	本地数据缓存
fluro	路由
city_pickers	城市选择
pull_to_refresh	上拉加载和下拉刷新
flutter_webview_plugin	webview
cached_network_image	图片缓存
provider	状态管理

1.pull_to_refresh: ^2.0.0

一个提供上拉加载和下拉刷新的组件,同时支持Android和Ios

特性

提供上拉加载和下拉刷新

几乎适合所有部件

提供全局设置默认指示器和属性

提供多种比较常用的指示器

支持Android和iOS默认滑动引擎,可限制越界距离,打造自定义弹性动画,速度,阻尼等。

支持水平和垂直刷新,同时支持翻转列表(四个方向)

提供多种刷新指示器风格:跟随,不跟随,位于背部,位于前部, 提供多种加载更多风格

提供二楼刷新,可实现类似淘宝二楼,微信二楼,携程二楼

允许关联指示器存放在Viewport外部,即朋友圈刷新效果

2.provider :^6.0.1

对 InheritedWidget 组件的上层封装，使其更易用，更易复用。

使用 provider 而非手动书写 InheritedWidget，有以下的优势:

简化的资源分配与处置

懒加载

创建新类时减少大量的模板代码

支持 DevTools

更通用的调用 InheritedWidget 的方式（参考 Provider.of/Consumer/Selector）

提升类的可扩展性，整体的监听架构时间复杂度以指数级增长（如 ChangeNotifier，其复杂度为 O(N)）

3.flutter_screenutil:^5.0.0+2

ScreenUtil.init只需在home或者根路由（即第一个flutter页面）中调用一次即可。

//设置尺寸（填写设计中设备的屏幕尺寸）如果设计基于360dp * 690dp的屏幕
    ScreenUtil.init(
        BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width,
            maxHeight: MediaQuery.of(context).size.height),
        designSize: Size(360, 690),
        orientation: Orientation.portrait);

4. flutter_swiper:^1.1.6

flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配.

功能路线

1.x.x 功能实现：

无限循环轮播

控制按钮

分页指示器

非无限循环模式

单元测试

例子

滚动方向

可定制控制按钮

可定制分页

自动播放

控制器

外部分页指示器

更多布局方式

5.cached_network_image: ^3.0.0

用于显示来自互联网的图像并将它们保存在缓存目录中。

4. 开发过程Git记录

自己手撸的项目地址：https://github.com/Lentolove/flutter_shop

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xl97Qq6H-1637758416159)(../pic/image-20211124204415755.png)]

遇到的问题

1.Cannot run with sound null safety because dependencies don’t support null safety

在引入 Swiper 插件的时候报

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KYcU8tkE-1637758416160)(../pic/image-20211111170732278.png)]

本文链接：https://blog.csdn.net/lentolove/article/details/121524793

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java核心技术卷一 -第五章：装箱和拆箱_自动装箱和自动拆箱在java第几章-程序员宅基地

文章浏览阅读340次。系列文章目录Java核心技术卷一 -第一章：java“白皮书”的关键术语Java核心技术卷一 -第三章：数据类型Java核心技术卷一 -第三章：变量与常量Java核心技术卷一 -第三章：运算符Java核心技术卷一 -第三章：字符串Java核心技术卷一 -第三章：输入与输出Java核心技术卷一 -第三章：数组Java核心技术卷一 -第四章：类之间的关系-依赖Java核心技术卷一 -第四章：预定义类-LocalDate类小应用Java核心技术卷一 -第四章：构造器Java核心技术卷一 -第_自动装箱和自动拆箱在java第几章

hadoop2.x常用端口、定义方法及默认端口、hadoop1.X端口对比-程序员宅基地

文章浏览阅读489次。问题导读：1.DataNode的http服务的端口、ipc服务的端口分别是哪个？2.NameNode的http服务的端口、ipc服务的端口分别是哪个？3.journalnode的http服务的端口、ipc服务的端口分别是哪个？4.ResourceManager的http服务端口是哪个？5.NodeManager的http服务端口是哪个？6.Master的http服务的端口、

协变张量和逆变张量（纯代数角度理解）-程序员宅基地

文章浏览阅读241次。_协变张量

Matlab在概率统计中的应用问题及解决方案集锦_matlab数学建模概率题-程序员宅基地

文章浏览阅读2.1k次，点赞2次，收藏9次。Matlab在概率统计中的应用（0001）问题：假设已知 Rayleigh 分布的概率密度函数为试用解析推导的方法求出该分布的分布函数、均值、方差、中心矩和原点矩。生成一组满足 Rayleigh 分布的伪随机数，用数值方法检验得出的解析结果是否正确。解：工具相应的数学定义的公式，所需的分布函数、均值、方差、中心矩和原点矩等可以由下面的语句推导出来。>> syms x;syms b positivep=x*exp(-x^2/2/b^2)/b^..._matlab数学建模概率题

关于一些不同寻常的tabBar的使用_手机app的tabbar能不能占比区域不同-程序员宅基地

文章浏览阅读509次。在实际开发中，系统的原生控件并不能满足我们的需求，这个时候就需要自己去自定义这个控件，自定义控件需要自己对原生控件结构非常了解。今天，这里来讲一下不同寻常的tabBar。原则:尽量利用系统自带的TabBar.只改需要改的地方不同寻常的tabBar 类型一：这种基本上是重写了整个tabbar，然后根据自己的需求来定义view的风格步骤: 1.把自带的TaBBar条给隐藏掉，添加自己的view l_手机app的tabbar能不能占比区域不同

苹果电脑第一次用pygame创建主窗口卡死的解决方法_pycharm的pygame.display.set_mode很卡怎么办?-程序员宅基地

文章浏览阅读1.3k次，点赞4次，收藏2次。第一次使用pygame写游戏时，我创立窗口的时候遇到了这样的困难。首先给出我出现卡顿原因的代码：import pygamedef main(): screen = pygame.display.set_mode((350, 500), depth=32) background = pygame.image.load('/Users/chenyang0804/Desktop/屏幕快照 2020-08-17 下午8.54.21.png') pygame.display.set_ca_pycharm的pygame.display.set_mode很卡怎么办?

随便推点

Convert.ToInt32()与Int.Parse()的区别_convert.toint32和int.parse的区别-程序员宅基地

文章浏览阅读619次。1、int适合简单数据类型之间的转换，C#的默认整型是int32(不支持bool型);2、int.Parse(string sParameter)是个构造函数，参数类型只支持string类型;3、Convert.ToInt32()适合将Object类型转换为int型;4、Convert.ToInt32()和int.Parse()的细微差别：对于空值(null)的处理_convert.toint32和int.parse的区别

mysql 常用命令-菜鸟级_mysql数据库命令大全菜鸟-程序员宅基地

文章浏览阅读207次。一、连接MySQL　　格式： mysql -h 主机地址 -u 用户名 -p 用户密码　　1、例1：连接到本机上的MYSQL。　　首先在打开DOS窗口，然后进入目录 mysql bin，再键入命令mysql -uroot -p，回车后提示你输密码，如果刚安装好MYSQL，超级用户root是没有密码的，故直接回车即可进入到MYSQL中了，MYSQL的提示符是： mysql>。　..._mysql数据库命令大全菜鸟

Python大数据分析与应用—2020年中国高校毕业生薪酬指数排名_基于pandas的中国大学生毕业去向影响因素分析-程序员宅基地

文章浏览阅读2.4k次。一．数据来源数据说明：数据来源于薪酬网，网址为https://www.xinchou.com/ChineseCollege/Indexes（注：薪酬指数：在做薪酬之前要做岗位评估，一般从10个维度去衡量岗位综合分数，一般以一千分为基准。毕业生薪酬指数既反映了毕业生成长发展状况，也反映了高校毕业生就业状况、收入变化，对客观分析高校毕业生就业趋势、企业人力资源配置状况具有重要的参考意义）2020年中国高校毕业生薪酬指数排名（前100）。数据存入csv文件中，每行数据为高校，行末为换行符作为结束；行内_基于pandas的中国大学生毕业去向影响因素分析