登录验证滑动

最新推荐文章于 2024-09-06 14:48:45 发布

原创

最新推荐文章于 2024-09-06 14:48:45 发布 · 977 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

本文详细介绍了如何在Flutter和Android平台上实现登录时的滑动验证功能。通过结合滑块组件和自定义动画，创建出既美观又实用的用户验证体验。在Flutter中，我们将使用滑动指示器库，而在Android方面，将利用滑动验证码库来完成这一过程。

import 'package:flutter/material.dart';
import 'package:toptongpin/app/common/widgets/image/local_image.dart';
import 'package:toptongpin/app/res/colors.dart';
import 'package:toptongpin/app/utils/extensions/size_fit.dart';

import '../../utils/arutil.dart';

class SlideVerifyWidget extends StatefulWidget {
  /// 背景色
  final Color backgroundColor;

  /// 滑动过的颜色
  final Color slideColor;

  /// 边框颜色
  final Color borderColor;

  final double height;
  final double width;

  final VoidCallback? verifySuccessListener;

  const SlideVerifyWidget(
      {Key? key,
      this.backgroundColor = Colours.greyE3,
      this.slideColor = Colours.app_main_blue,
      this.borderColor = Colours.transparent,
      this.height = 55,
      this.width = 240,
      this.verifySuccessListener})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return SlideVerifyState();
  }
}

class SlideVerifyState extends State<SlideVerifyWidget>
    with TickerProviderStateMixin {
  late double height;
  late double width;

  double sliderDistance = 0;

  double initial = 0.0;

  /// 滑动块宽度
  double sliderWidth = 64;

  /// 验证是否通过，滑动到最右方为通过
  bool verifySuccess = false;

  /// 是否允许拖动
  bool enableSlide = true;

  late AnimationController _animationController;
  late Animation _curve;

  @override
  void initState() {
    super.initState();
    this.width = widget.width;
    this.height = widget.height;
    _ini

最低0.47元/天解锁文章