4.1 ScreenUtil 配置按比例适配屏幕1234567891011121314151617181920212223import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';class ViewScreenPape extends StatelessWidget { const ViewScreenPape({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Container( width: 100.w, height: 100.w, color: Colors.amber, child: Text( "我是文 ...

3.9 视图层打薄【重要】方案 使用 extension 扩展方式简化代码 抽取组件，提高复用率 基础组件、业务组件 样式全局管理 字体、颜色、间距、圆角 assets 资源索引 图片、文件、图标 svg 原来的代码 lib/pages/login.dart 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551 ...

4.2 splash 启动界面Splash 作用 让 flutter 视图引擎有个缓存热身时间 在 splash 决定去哪个界面 实现步骤： 第 1 步：加入图片到 assets将图片放入 assets/images/3.0x 然后执行 Assets: Images x1 x2 Generate 生成需要的 x1 x2 图片 复制 files.txt 配置到 lib/common/values/images.dart 1234class AssetsImages { ... static const splashJpg = 'assets/images/splash.jpg';} 第 2 步：修改 splashlib/pages/system/splash/view.dart 123456789101112131415161718192021class SplashPage extends GetView<SplashController> { co ...

4.3 native 启动图实现步骤： flutter 引擎启动会有一点延迟，这时候会显示白屏，我们要做一个设备的启动图来优化下体验。 第 1 步：安装依赖包 flutter_native_splash1flutter pub add flutter_native_splash 第 2 步：配置 yamlpubspec.yaml 123flutter_native_splash: color: '#ffffff' image: 'assets/icons/launcher_android.png' color 启动图背景色，这里我设置白色 #ffffffimage 启动图，可以放你的 logo，这张图背景透明 第 2 步：运行创建命令1flutter pub run flutter_native_splash:create 这将会生成各个平台的 splash ui 配置代码 第 4 步：启动后清除不用的资源lib/global.dart 1234567class Global { static Futu ...

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.2 注册表单编写 实现步骤： 我们可以养成一个习惯，业务界面一开始就写 i18n 定义 第 1 步：i18n 多语言lib/common/i18n/locale_keys.dart 12345678910111213141516// 登录、注册 - 通用static const loginForgotPassword = 'login_forgot_password';static const loginSignIn = 'login_sign_in';static const loginOrText = 'login_or_text';static const loginSignUp = 'login_sign_up';// 注册 - register userstatic const registerTitle = 'register_title';static const registerDesc = 'register_desc& ...

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

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