Flutter 课题分享

55 阅读2分钟

项目结构

整体结构

image.png

Android目录

通常来说都不需要改动andorid目录下面的代码,但当需要获得某个权限的时候,修改app图标,app启动页以及调用对应平台的原生的一些能力 image.png

image.png

写 Flutter 代码的地方

image.png

image.png

全局样式配置

新建一个ThemeData实例,要重写的一些组件的默认样式 image.png 在main.dart文件中注入

image.png

登录模块

输入校验部分

TID输入框: 数字/限定8位字符 UID输入框: 字母&数字/最多可输入19位字符 Password输入框: 字母&数字/最多输入15位字符/(密文显示) submit按钮:不满足要求,Submit键为灰色,无法点击;满足要求,submit由灰色变为绿色,可点击。

表单校验逻辑。

image.png image.png

image.png

image.png

路由状态管理

image.png

状态管理模块

权限模块

单用户和多用户

登录的用户分为单用户和多用户。关闭app后,单用户再次进入app依旧保持登录状态,如果是手动退出登录那么就清空登录状态,但是保存TID与UID在本地。多用户,每次进入app都需要重新输出密码进行登录。

主扫/被扫/主扫&被扫

根据在as的扫码方式的配置,三种扫码方式有不同的首页权限按钮展示。

主扫展示内容:

image.png

被扫展示内容

image.png

主扫&被扫

image.png

角色部分:

主管,管理员和普通用户。三个角色在系统模块的权限有所不同

管理员权限

可以展示Setting模块部分权限 image.png

普通用户

image.png

进入页面前是否需要输入密码

清机和撤销模块在进入页面的时候需要根据as的配置,判断是否需要输入密码,如果需要那么就输入密码之后才可以进入相关页面。

image.png

image.png

扫码模块

支持吊起摄像头扫描二维码以及通过底部输入框输入。

image.png

transaction模块

展示交易汇总信息,顶部展示所有的交易信息,列表下拉分页展示交易信息。 image.png

下拉加载更多数据展示& 回到顶部

image.png

查询筛选条件

image.png

清机模块

所有的首页的模块点击之前需要判断七天之内是否清机过没,若没有那么就进行页面跳转的拦截,跳转到settlement页面。

image.png

image.png