如何在颤振中显示文本验证码？

Question

我想显示验证码图像并进行验证。所以请大家给我建议任何在 flutter 中实现文本验证码的包或想法。我已经搜索过这个但是我没有正确的想法和任何准确的包。

我希望在 flutter 中看起来像下面的视图，

我收到了一些类似的包裹，

• flutter_recaptcha_v2
• enter link description here

但没有完成我的要求。请帮助我或建议我。谢谢

Answer 1

您可以复制粘贴 运行 下面的完整代码
您可以使用包 https://pub.dev/packages/hb_check_code
代码片段

Widget build(BuildContext context) {
    String code = randomAlpha(5);

    return Scaffold(
        ...
        body: Column(
          children: [
            Row(
              children: [
                Container(
                    alignment: Alignment.center,
                    child: HBCheckCode(
                      code: code,
                    )),
                InkWell(
                    onTap: () {
                      setState(() {});
                    },
                    child: Icon(Icons.refresh)),
              ],

工作演示

完整代码

import 'package:hb_check_code/hb_check_code.dart';
import 'package:flutter/material.dart';
import 'package:random_string/random_string.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 = randomAlpha(5);

    return Scaffold(
        appBar: AppBar(
          title: Text("captcha"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                    alignment: Alignment.center,
                    child: HBCheckCode(
                      code: code,
                    )),
                InkWell(
                    onTap: () {
                      setState(() {});
                    },
                    child: Icon(Icons.refresh)),
              ],
            ),
          ],
        ));
  }
}