6.3 表单输入有效验证实现步骤:
第 1 步:安装插件 validatorless1flutter pub add validatorless
使用
12345678910TextFormField( decoration: InputDecoration( labelText: 'User e-mail', ), // 加在这里,可传入多个检查 validator: Validatorless.multiple([ Validatorless.email('The field must be an email'), Validatorless.required('The field is obligatory') ]),)
检查函数
1234567891011121314151617181920// 必须输入Validatorless.required(String)// 是否emailValidatorless.email(String)// 最小长度Validatorless.min ...
6.6 EasyLoading 配置实现步骤:
第 1 步:下载插件 flutter_easyloading1flutter pub add flutter_easyloading
第 2 步:loading 工具类lib/common/utils/loading.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import 'package:flutter/material.dart';import 'package:flutter_easyloading/flutter_easyloading.dart';/// 提示框class Loading { static const int _milliseconds = 500; // 提示 延迟毫秒, 提示体验 秒关太快 static const int ...
6.8 错误全局处理实现步骤:
第 1 步:错题体数据结构错误信息采用全局统一的数据格式
12345{ "statusCode": 400, "error": "registration-error-email-exists", "message": "已存在使用此电子邮件地址的帐户"}
statusCode 遵循 http status 标准error 是一个错误文字标识message 是错误描述,你可以显示给客户
第 2 步:错误数据 modellib/common/models/error_message.dart
123456789101112131415161718192021222324252627/// 错误体信息class ErrorMessageModel { int? statusCode; String? error; String? message; ErrorMessag ...
5.2 SliderIndicatorWidget 封装
实现步骤:
第 1 步:SliderIndicatorWidget 类lib/common/components/slider_indicator.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758import 'package:flutter/material.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';/// slider indicator 指示器class SliderIndicatorWidget extends StatelessWidget { /// 个数 final int length; /// 当前位置 final int currentI ...
5.1 WelcomeSlider 封装实现步骤:
第 1 步:安装插件 carousel_slider1flutter pub add carousel_slider
第 2 步:i18n 配置lib/common/i18n/locale_keys.dart
12345678910// 欢迎页static const welcomeOneTitle = 'welcome_one_title';static const welcomeOneDesc = 'welcome_one_desc';static const welcomeTwoTitle = 'welcome_two_title';static const welcomeTwoDesc = 'welcome_two_desc';static const welcomeThreeTitle = 'welcome_three_title';static const welcomeThreeDesc = ...
5.3 Skip、Next、Start 按钮联动
实现步骤:
第 1 步:控制器lib/pages/system/welcome/controller.dart
123456789101112131415161718192021 List<WelcomeModel>? items; // 滚动集合 int currentIndex = 0; // 当前项 bool isShowStart = false; // 是否显示 Start CarouselController carouselController = CarouselController(); // slider 控制器// 当前位置发生变化 void onPageChanged(int index) { currentIndex = index; isShowStart = currentIndex == 2; update(['slider', 'bar']); }// 去首页 void onTo ...
5.4 仅首次显示欢迎实现步骤:
APP 每次打开都会先到 Splash 界面
首次打开先去 Welcome 界面
以后直接去 Main 界面
第 1 步:定义常量lib/common/values/constants.dart
1static const storageFirstOpen = 'first_open'; // 首次打开
第 2 步:ConfigService 配置lib/common/services/config.dart
1234567// 是否首次打开bool get isFirstOpen => Storage().getBool(Constants.storageFirstOpen);// 标记已打开appvoid setAlreadyOpen() { Storage().setBool(Constants.storageFirstOpen, true);}
第 3 步:控制器lib/pages/system/w ...
7.1 登录界面编写布局
实现步骤:
第 1 步:i18n 多语言lib/common/i18n/locale_keys.dart
12345// 登录 - back loginstatic const loginBackTitle = 'login_back_title';static const loginBackDesc = 'login_back_desc';static const loginBackFieldEmail = 'login_back_field_email';static const loginBackFieldPassword = 'login_back_field_password';
lib/common/i18n/locales/locale_en.dart
12345// 登录 - back loginLocaleKeys.loginBackTitle: 'Welcome login! ...
7.3 离线登录处理离线登录是指用户重新打开 app 后,无需登录 login,直接操作。
实现步骤:
第 1 步:界面切换顺序
Splash 界面每次启动都会运行,有点像 index.html
第一次运行进入 Welcome 界面
之后启动直接进入 Main 界面
购物的时候需要 Login 界面
没有账号进入 Register 界面
注册需要 Pin 界面
注册完成进入 Login 界面
登录完成进入上一个业务界面,比如 Order
第 2 步:Splash 界面lib/pages/system/splash/controller.dart
123456789void _jumpToPage() { Future.delayed(const Duration(seconds: 1)).then((_) { if (!ConfigService.to.isFirstOpen) { Get.offAllNamed(RouteNames.main); } else { ...
7.4 密码 aes 后传输效果
AES 介绍
密码需要在传输中加密,防止被网关抓包,平时你们用的 wifi 都是可以被抓包的
https://zh.wikipedia.org/wiki/高级加密标准
高级加密标准(英语:Advanced Encryption Standard,缩写:AES),又称Rijndael 加密法(荷兰语发音:ˈrɛindaːlˈrɛindaːl,音似英文的“Rhine doll”),是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用。经过五年的甄选流程,高级加密标准由美国国家标准与技术研究院(NIST)于 2001 年 11 月 26 日发布于 FIPS PUB 197,并在 2002 年 5 月 26 日成为有效的标准。现在,高级加密标准已然成为对称密钥加密中最流行的算法之一。
之所以选这个加密法,是因为 wordpress rest api 中的接口,输入的 password 是一个明文,其实输入 md5 签名更好。
实现步骤:
第 1 步:安装插件 encrypt1flutter pub add ...