实现Flutter离线验证码组件

最新推荐文章于 2024-06-04 19:19:46 发布

懂你的大海

最新推荐文章于 2024-06-04 19:19:46 发布

阅读量539

点赞数

分类专栏： Andorid进阶文章标签： android 移动开发 Android 开发 Android架构师程序员

本文链接：https://blog.csdn.net/Androidbye/article/details/113945423

版权

本文介绍了如何在Flutter中实现一个离线验证码组件，通过创建StatefulWidget，随机生成英文字符和数字，然后绘制到图像上。详细步骤包括组件类的创建、随机字符生成以及画图代码展示。提供了完整源码和学习资源链接。

摘要由CSDN通过智能技术生成

在做一个项目的时候发现关于离线验证码的组件真的少，经过一番面向搜索引擎编程【百度】以后发现了一个非常小众，很少人使用的一个包hb_check_code: ^0.0.2（ https://pub.flutter-io.cn/packages/hb_check_code）;在此感谢这个大佬的实现，我便在大佬的肩上接着弄成自己项目需要的样子。

因为原本项目的验证码控件是使用原生Android的方式实现的，后面我对照了一下跟大佬的实现方法其实是差不多的，但是太久没有用上Flutter跟Dart都生疏了。
话不多说先上图片让大家看看：

现在我们来解析要想实现一直这个随机验证码图片要经历那些过程：
1、创建空文件快捷生成一个StatefulWidget组件类；
2、随机生成英文字符跟数字；
3、将这些随机生成的字符跟用来模糊数据的点与横线画出来。
不要打我，步骤就是这么简单，实现才是重点

首先实现我们先来生成一个简单组件类--就随便取个名字吧。【VerifyCode】

class VerifyCode extends StatefulWidget {
 final int vCodeNum;  //用来决定是生成多少位的验证码，默认4位
 final double width;  //设置控件宽度 默认70
 final double height; //设置控件高度 默认25
 final Color backgroundColor; //设置背景色
 //回调---用于获取随机的数据
 final ValueChanged<String> verifyCallback;
 const VerifyCode({Key key, this.vCodeNum=4, this.width=70, this.height=25, this.backgroundColor, this.verifyCallback}) : super(key: key);


 @override
 _VerifyCodeState createState() => _VerifyCodeState();
}

class _VerifyCodeState extends State<VerifyCode> {

 @override
 Widget build(BuildContext context) {}
}

上面就是简单是实现了一个验证码组件该有的东西，接下来我们来实现随机生成英文字符跟数字的方法：

//先定义一个非常low的常量
const _charsAll = ['1', '2', '3', '4', '5', '6',
 '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',  'j',
 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w',
 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
 'K', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
 'X', 'Y', 'Z'];
 
 //然后定义一个随机生成字符串的方法
 String getRandomString(){
   String code = "";
   for (var i = 0; i < widget.vCodeNum; i++) {
     code = code +  _charsAll[Random().nextInt(_charsAll.length)];
   }
   return code;
 }