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.4 Pin 组件封装 实现步骤： 第 1 步：安装插件 pinputhttps://pub.flutter-io.cn/packages/pinput 1flutter pub add pinput 第 2 步：定义参数作为业务组件放在 lib/common/components lib/common/components/pin.dart 1234567891011121314/// pin 输入框class PinPutWidget extends StatelessWidget { /// 提交事件 final Function(String)? onSubmit; /// 焦点 final FocusNode? focusNode; /// 文本编辑控制器 final TextEditingController? controller; /// 验证函数 final String? Function(String?)? validator; 第 3 步：样式1234567891011121314151617181 ...

6.5 Pin 界面编写 实现步骤： 第 1 步：i18n 多语言lib/common/i18n/locale_keys.dart 12345// 注册PIN - register pinstatic const registerPinTitle = 'register_pin_title';static const registerPinDesc = 'register_pin_desc';static const registerPinFormTip = 'register_pin_form_tip';static const registerPinButton = 'register_pin_button'; lib/common/i18n/locales/locale_en.dart 12345// 注册PIN - register pinLocaleKeys.registerPinTitle: 'Verificat ...

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.7 api 发送注册请求实现步骤： 第 1 步：安装 vscode 插件 Json to Dart Model 第 2 步：生成请求 model复制请求 json 1234567{ "username": "ducafecat5", "password": "123456", "email": "ducafecat5@gmail.com", "first_name": "ducafecat5", "last_name": ""} 如果你是剪贴板的选 From ClipBoard 输入 user_register 生成文件 lib/common/models/request/user_register.dart 12345678910111213141516171819202122232425262728293031323 ...

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 ...

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.2 读取用户资料&缓存实现步骤： 第 1 步：常量定义lib/common/values/constants.dart 123456/// 常量class Constants { ... static const storageToken = 'token';// 登录成功后 token static const storageProfile = 'profile';// 用户资料缓存} storageToken 登录成功后 token storageProfile 用户资料缓存 第 2 步：登录请求 modellib/common/models/woo/request/user_login.dart 12345678910111213141516171819202122/// 用户登录class UserLoginReq { String? username; String? password; UserL ...

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 { ...