Flutter仿Boss-4.短信验证码界面

简介: Flutter仿Boss-4.短信验证码界面

效果

image.png

简述

移动应用开发中,处理短信验证码是确保用户身份验证和安全性的重要步骤。本文将介绍如何使用Flutter构建一个短信验证码界面,让用户输入通过短信发送到他们手机的四位验证码。

依赖项

在这个项目中,我们将使用以下依赖项:

  • GetX:用于状态管理和依赖注入。
  • verification_code:用于验证码输入界面的UI。
实现

我们的实现由两个主要组件组成:CodeLogicCodePage

CodeLogic

CodeLogic负责处理验证码界面背后的逻辑。它管理状态、控制验证码过期的计时器,并处理验证码验证。

// CodeLogic 类
class CodeLogic extends GetxController {
  final CodeState state = CodeState();
  final int time = 60;
  Timer? _timer;

  ///手机号后四位
  String get phoneNum {
    final loginLogic = Get.find<LoginLogic>();
    var phone = loginLogic.state.phoneNum.value;
    if (phone.isNotEmpty && phone.length == 11) {
      return phone.substring(phone.length - 4);
    }
    return "";
  }

  /// 验证码输入完成
  void codeInputCompleted({required String code}) {
    state.code.value = code;
  }

  /// 验证码是否输入完毕
  bool get codeIsCompleted {
    return state.code.value.length == 4;
  }

  @override
  void onReady() {
    super.onReady();
    _startTimer();
  }

  ///打开计时器
  void _startTimer() {
    _stopTimer();
    state.countDownNum.value = time;
    _timer = Timer.periodic(const Duration(seconds: 1), (Timer t) {
      if (state.countDownNum.value <= 0) {
        state.countDownNum.value = -1;
        return;
      }
      state.countDownNum.value--;
    });
  }

  ///停止计时器
  void _stopTimer() {
    _timer?.cancel();
    _timer = null;
  }

  @override
  void onClose() {
    _stopTimer();
    super.onClose();
  }

  ///重新发送
  void reSendCode() {
    //发送代码
    _startTimer();
  }

  ///下一步
  void next(BuildContext context) {
    if (!codeIsCompleted) {
      return;
    }
    Get.offAllNamed(Routers.homePage);
  }
}


CodeState
// CodeState 类
class CodeState {
  var code = "".obs;
  var countDownNum = 60.obs;
}
CodePage

CodePage是用户与验证码界面进行交互的UI组件。

// CodePage 类
class CodePage extends StatelessWidget {
  const CodePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<CodeLogic>();
    return Container(
      // UI 实现
    );
  }
}
结论

在本教程中,我们演示了如何使用Flutter实现一个短信验证码界面。通过GetX进行状态管理和简单的UI布局,用户可以轻松地输入和验证他们的验证码。这个界面是任何需要通过短信进行用户身份验证的移动应用的重要部分。您可以进一步增强这个界面,例如添加错误处理、UI动画,或者与后端服务集成进行实际的短信验证。

详情

github.com/yixiaolunhui/flutter_project

相关文章
|
3月前
|
缓存 监控 前端开发
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
103 10
|
Android开发 Windows
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(一)
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(一)
274 0
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(一)
|
3月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
117 8
|
数据安全/隐私保护 网络架构
Flutter(十)——登录界面实现
Flutter(十)——登录界面实现
1094 2
|
搜索推荐 数据安全/隐私保护 UED
Flutter 开发一个常用的登录界面
登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。
665 1
Flutter 开发一个常用的登录界面
|
API 开发工具 Android开发
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(二)
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(二)
357 0
【错误记录】Android Studio 的 Flutter 代码界面没有 Logcat 面板 ( 2021年08月28日最新解决方案 )(二)
|
容器
【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )
【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )
556 0
【错误记录】Flutter 界面跳转报错 ( Navigator operation requested with a context that does not include a Naviga )
【错误记录】Flutter 界面报错 ( No MediaQuery widget ancestor found. | Scaffold widgets require a MediaQuery )
【错误记录】Flutter 界面报错 ( No MediaQuery widget ancestor found. | Scaffold widgets require a MediaQuery )
410 0
【错误记录】Flutter 界面报错 ( No MediaQuery widget ancestor found. | Scaffold widgets require a MediaQuery )
|
开发工具 iOS开发
Flutter笔记 02:iOS调用多个flutter界面
Flutter笔记 02:iOS调用多个flutter界面
811 0

热门文章

最新文章

  • 1
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 2
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 3
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
  • 4
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 5
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex