Shulou(Shulou.com)06/02 Report--

Flutter CAPTCHA input box what are the implementation methods, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

What's the point?

A perfect real-world CAPTCHA input box or PIN input UI usually meets the following minimum requirements:

There are 4 or 6 text fields, each of which can only accept 1 character (usually a number)

Automatically focus on the next field after entering a number

You often see this feature in applications that require phone number confirmation, email, or two-factor authentication.

Make the OTP field from scratch

Apply Preview

This example creates a simple OTP screen. First, focus on the first input field. When you enter a number, the cursor automatically moves to the next field. When the submit button is pressed, the OTP code you enter will be displayed on the screen.

Here's how it works:

When testing this application, you should use the emulator's soft keyboard instead of the computer's hardware keyboard.

Code

Create a reusable widget named OtpInput:

/ / Create an input widget that takes only one digitclass OtpInput extends StatelessWidget {final TextEditingController controller; final bool autoFocus; const OtpInput (this.controller, this.autoFocus, {Key? Key}): super (key: key) Override Widget build (BuildContext context) {return SizedBox (height: 60, width: 50, child: TextField (autofocus: autoFocus, textAlign: TextAlign.center, keyboardType: TextInputType.number, controller: controller, maxLength: 1, cursorColor: Theme.of (context). PrimaryColor, decoration: const InputDecoration (border: OutlineInputBorder (), counterText:'' HintStyle: TextStyle (color: Colors.black, fontSize: 20.0), onChanged: (value) {if (value.length = = 1) {FocusScope.of (context) .nextFocus () },),);}}

The complete source code and explanation in main.dart (I put the OtpInput class at the bottom of the file):

Import 'dart:math' as math;import' package:flutter/cupertino.dart';import 'package:flutter/material.dart';import' package:async/async.dart';import 'package:flutter/scheduler.dart';import' package:url_strategy/url_strategy.dart';void main () {setPathUrlStrategy (); runApp (MyApp ());} class MyApp extends StatelessWidget {const MyApp ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return MaterialApp (/ / Hide the debug banner debugShowCheckedModeBanner: false, title: 'nut', theme: ThemeData (primarySwatch: Colors.indigo,), home: const HomeScreen (),);} class HomeScreen extends StatefulWidget {const HomeScreen ({Key? Key}): super (key: key); @ override State createState () = > _ HomeScreenState ();} class _ HomeScreenState extends State {String _ imageUrl = 'https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png'; double _ fontSize = 20; String _ title = "official nut account"; / 4 text editing controllers that associate with the 4 input fields final TextEditingController _ fieldOne = TextEditingController (); final TextEditingController _ fieldTwo = TextEditingController (); final TextEditingController _ fieldThree = TextEditingController () Final TextEditingController _ fieldFour = TextEditingController (); / / This is the entered code / / It will be displayed ina Text widget String? _ otp @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text (_ title),), body: Column (mainAxisAlignment: MainAxisAlignment.center, children: [const Text ('Please enter CAPTCHA'), const SizedBox (height: 30,) / / Implement 4 input fields Row (mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [OtpInput (_ fieldOne, true), OtpInput (_ fieldTwo, false), OtpInput (_ fieldThree, false), OtpInput (_ fieldFour, false)],), const SizedBox (height: 30 ), ElevatedButton (onPressed:) {setState (() {_ otp = _ fieldOne.text + _ fieldTwo.text + _ fieldThree.text + _ fieldFour.text });}, child: const Text ('submit'), const SizedBox (height: 30,), / / Display the entered OTP code Text (_ otp?? 'CAPTCHA', style: const TextStyle (fontSize: 30)],),);}} / / Create an input widget that takes only one digitclass OtpInput extends StatelessWidget {final TextEditingController controller; final bool autoFocus; const OtpInput (this.controller, this.autoFocus, {Key? Key}): super (key: key) Override Widget build (BuildContext context) {return SizedBox (height: 60, width: 50, child: TextField (autofocus: autoFocus, textAlign: TextAlign.center, keyboardType: TextInputType.number, controller: controller, maxLength: 1, cursorColor: Theme.of (context). PrimaryColor, decoration: const InputDecoration (border: OutlineInputBorder (), counterText:'' HintStyle: TextStyle (color: Colors.black, fontSize: 20.0), onChanged: (value) {if (value.length = = 1) {FocusScope.of (context) .nextFocus () },),);}} use the third package

To quickly achieve your goal in just a few lines of code, you can use third-party plug-ins. Some of the good ones in our example are pin_code_fields,otp_text_field and so on. The following example uses pin_code_fileds, which provides a lot of great features:

Automatically focus the next field on typing and the previous field on delegation

Can be set to any length

Highly customizable

Enter 3 different types of animations for text

Animated active, inactive, selected, and disabled field color toggle

Autofocus option

Paste OTP code from the clipboard

You can also see the characters you entered in the terminal window:

Code

1. Install the plug-in:

Flutter pub add pin_code_fields

two。 Final code:

Import 'dart:math' as math;import' package:flutter/cupertino.dart';import 'package:flutter/material.dart';import' package:async/async.dart';import 'package:pin_code_fields/pin_code_fields.dart';import' package:url_strategy/url_strategy.dart';void main () {setPathUrlStrategy (); runApp (MyApp ());} class MyApp extends StatelessWidget {const MyApp ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return MaterialApp (/ / Hide the debug banner debugShowCheckedModeBanner: false, title: 'nut', theme: ThemeData (primarySwatch: Colors.indigo,), home: const HomeScreen (),);} class HomeScreen extends StatefulWidget {const HomeScreen ({Key? Key}): super (key: key); @ override State createState () = > _ HomeScreenState ();} class _ HomeScreenState extends State {String _ imageUrl = 'https://luckly007.oss-cn-beijing.aliyuncs.com/image/image-20211124085239175.png'; double _ fontSize = 20; String _ title = "nut official account"; / / 4 text editing controllers that associate with the 4 input fields TextEditingController textEditingController = TextEditingController (); String currentText = "" Override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text (_ title),), body: Padding (padding: const EdgeInsets.all (30), child: Center (child: PinCodeTextField (length: 6, obscureText: false, animationType: AnimationType.fade) PinTheme: PinTheme (shape: PinCodeFieldShape.box, borderRadius: BorderRadius.circular (5), fieldHeight: 50, fieldWidth: 40, activeFillColor: Colors.white,), animationDuration: const Duration (milliseconds: 300), backgroundColor: Colors.blue.shade50, enableActiveFill: true, controller: textEditingController OnCompleted: (v) {debugPrint ("Completed") }, onChanged: (value) {debugPrint (value); setState (() {currentText = value;});}, beforeTextPaste: (text) {return true }, appContext: context,),);}} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.