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( "我是文 ...

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

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

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

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

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

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