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

6.1 TextFormWidget 组件封装 预备知识FormForm继承自StatefulWidget对象，它对应的状态类为FormState。 Form类的定义： 123456789101112131415class Form extends StatefulWidget { final Widget child; /// 决定Form所在的路由是否可以直接返回（如点击返回按钮），该回调返回一个Future对象， /// 如果 Future 的最终结果是false，则当前路由不会返回； /// 如果为true，则会返回到上一个路由。此属性通常用于拦截返回按钮。 final WillPopCallback? onWillPop; /// Form的任意一个子FormField内容发生变化时会触发此回调。 final VoidCallback? onChanged; /// 是否自动校验输入内容；当为true时，每一个子 FormField 内容发生变化时都会自动校验合法性， /// 并直接显示错误信息。否则，需要通过调用FormState.valida ...

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

9.1 商品首页布局 sliver 编写 为了保证整体滚动的一致性，我们用 sliver 家族来布局如果没有这个需求用，用 SingleChildScrollView 就行了 实现步骤： 第 1 步：i18nlib/common/i18n/locale_keys.dart 12345// 商品 - 首页static const gHomeSearch = 'goods_home_search';static const gHomeFlashSell = 'goods_home_flash_shell';static const gHomeNewProduct = 'goods_home_new_product';static const gHomeMore = 'goods_home_more'; lib/common/i18n/locales/locale_en.dart 12345// 商品 - 首页LocaleKeys.gH ...

9.10 首次打开读缓存 如果首屏快速展示内容，体验将是一个提升我们设置下缓存，数据是来自于下拉刷新 实现步骤： 第 1 步：定义缓存常量lib/common/values/constants.dart 12345// 首页离线static const storageHomeBanner = 'home_banner';static const storageHomeCategories = 'home_categories';static const storageHomeFlashSell = 'home_flash_sell';static const storageHomeNewSell = 'home_new_sell'; 第 2 步：本地离线 json 数据格式lib/common/utils/storage.dart 1234567/// kv离线存储class Storage { ... Future<b ...

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