美文网首页
Flutte 生成图形验证码

Flutte 生成图形验证码

作者: 尤先森 | 来源:发表于2020-07-23 14:23 被阅读0次

    开发过程中有遇到这种需求,发现网上案例还比较少,所以决定还是自己撸一个。

    支持限制尺寸,也可以根据字符长度自适应。
    差不多就是长这样子。


    WeChata674f8a31d96e0c460a67aaf7ab94946.png

    Installing

    在你的package's pubspec.yaml中加入

    dependencies:
      hb_check_code: ^0.0.1
    

    DEMO

    import 'dart:math';
    import 'package:hb_check_code/hb_check_code.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'HBCheckCode Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: CodeTestPage(),
        );
      }
    }
    
    class CodeTestPage extends StatefulWidget {
      @override
      _CodeTestPageState createState() => _CodeTestPageState();
    }
    
    class _CodeTestPageState extends State<CodeTestPage> {
      @override
      Widget build(BuildContext context) {
        String code = "";
        for (var i = 0; i < 6; i++) {
          code = code + Random().nextInt(9).toString();
        }
        return Scaffold(
            appBar: AppBar(
              title: Text("生成图形验证码"),
            ),
            body: Container(
                alignment: Alignment.center,
                child: HBCheckCode(
                  code: code,
                )));
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutte 生成图形验证码

          本文链接:https://www.haomeiwen.com/subject/jjgclktx.html