Flutter 开发 一个 字母+数字的随机数图片验证码

随机数图片验证码"/>

Flutter 开发 一个 字母+数字的随机数图片验证码

Flutter 一个 字母+数字的随机数图片验证码

废话不多说，首先上效果图

使用方法：

 @overridevoid initState() {super.initState();_getCode();}// 调用随机数方法_getCode(){code = '';String alphabet = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';for (var i = 0; i < 4; i++) {String charOrNum = Random().nextInt(2) % 2 == 0 ? "char" : "num";  switch (charOrNum) {case "char":code += alphabet[Random().nextInt(alphabet.length)];break;case "num":code += Random().nextInt(9).toString();break;}setState(() {});}}// Widget
InkWell(child:Container(padding: EdgeInsets.only(left:ScreenAdapter.setWidth(10)),decoration: BoxDecoration(color: Colors.white,border:Border(left:BorderSide(width:ScreenAdapter.setWidth(1),color:Color(0xffC7C7C7)))),child:CustomVertificationCode(code: code,)),onTap:(){_getCode();}
)

生成随机数代码：

import 'package:flutter/material.dart';
import 'dart:math';class CustomVertificationCode extends StatefulWidget {final String code;final int dotCount;final double width;final double height;final Color backgroundColor;const CustomVertificationCode({Key key,@required this.code,this.backgroundColor,this.dotCount = 50,this.width = 120,this.height = 40}): super(key: key);@override_CustomVertificationCodeState createState() => _CustomVertificationCodeState();
}class _CustomVertificationCodeState extends State<CustomVertificationCode> {//随机生成绘图数据Map getRandomData() {// 数字listList list = widget.code.split("");// X坐标double x = 0.0;// 最大字体大小double maxFontSize = 35.0;//将painter保存起来，先计算出位置List mList = [];for (String item in list) {Color color = Color.fromARGB(255, Random().nextInt(255),Random().nextInt(255), Random().nextInt(255));int fontWeight = Random().nextInt(9);TextSpan span = TextSpan(text: item,style: TextStyle(color: color,fontWeight: FontWeight.values[fontWeight],fontSize: maxFontSize - Random().nextInt(10)));TextPainter painter =TextPainter(text: span, textDirection: TextDirection.ltr);painter.layout();double y =Random().nextInt(widget.height.toInt()).toDouble() - painter.height;if (y < 0) {y = 0;}Map strMap = {"painter": painter, "x": x, "y": y};mList.add(strMap);x += painter.width + 3;}double offsetX = (widget.width - x) / 2;List dotData = [];//绘制干扰点for (var i = 0; i < widget.dotCount; i++) {int r = Random().nextInt(255);int g = Random().nextInt(255);int b = Random().nextInt(255);double x = Random().nextInt(widget.width.toInt() - 5).toDouble();double y = Random().nextInt(widget.height.toInt() - 5).toDouble();double dotWidth = Random().nextInt(6).toDouble();Color color = Color.fromARGB(255, r, g, b);Map dot = {"x": x, "y": y, "dotWidth": dotWidth, "color": color};dotData.add(dot);}Map checkCodeDrawData = {"painterData": mList,"offsetX": offsetX,"dotData": dotData,};return checkCodeDrawData;}@overrideWidget build(BuildContext context) {print("buid?");double maxWidth = 0.0;Map drawData = getRandomData();//计算最大宽度做自适应maxWidth = getTextSize("8" * widget.code.length,TextStyle(fontWeight: FontWeight.values[8], fontSize: 25)).width;return Container(color: widget.backgroundColor,width: maxWidth > widget.width ? maxWidth : widget.width,height: widget.height,child: CustomPaint(painter: CustomVertificationCodePainter(drawData: drawData),));}Size getTextSize(String text, TextStyle style) {final TextPainter textPainter = TextPainter(text: TextSpan(text: text, style: style),maxLines: 1,textDirection: TextDirection.ltr)..layout(minWidth: 0, maxWidth: double.infinity);return textPainter.size;}
}class CustomVertificationCodePainter extends CustomPainter {final Map drawData;CustomVertificationCodePainter({@required this.drawData,});Paint _paint = new Paint()..color = Colors.grey..strokeCap = StrokeCap.square..isAntiAlias = true..strokeWidth = 1.0..style = PaintingStyle.fill;@overridevoid paint(Canvas canvas, Size size) {List mList = drawData["painterData"];double offsetX = drawData["offsetX"];//为了能��居中显示移动画布canvas.translate(offsetX, 0);//从Map中取出值，直接绘制for (var item in mList) {TextPainter painter = item["painter"];double x = item["x"];double y = item["y"];painter.paint(canvas,Offset(x, y),);}// //将画布平移回去canvas.translate(-offsetX, 0);List dotData = drawData["dotData"];for (var item in dotData) {double x = item["x"];double y = item["y"];double dotWidth = item["dotWidth"];Color color = item["color"];_paint.color = color;canvas.drawOval(Rect.fromLTWH(x, y, dotWidth, dotWidth), _paint);}}@overridebool shouldRepaint(CustomPainter oldDelegate) {return this != oldDelegate;}
}

感谢 hb_check_code 提供技术帮助！