How to display text captcha in flutter?

Issue

I want to display captcha image and do verify it. So Please guys suggest me any package or idea to implement text captcha in flutter. I have already search for this but i have not got proper idea and any accurate packages.

I want look like below view in flutter,

I got little similar packages,

• flutter_recaptcha_v2
• enter link description here

But not complete my requirement. Please help me or suggest me. Thanks.

Solution

You can copy paste run full code below
You can use package https://pub.dev/packages/hb_check_code
code snippet

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)),
              ],

working demo

full code

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)),
              ],
            ),
          ],
        ));
  }
}

Answered By – chunhunghan

Answer Checked By – Marie Seifert (FlutterFixes Admin)