flutter_dynamic_otp

Description:

flutter dynamic otp

flutter_dynamic_otp #
The flutter_dynamic_otp Flutter package that provides a customizable OTP (One-Time Password). It
supports all the platforms flutter supports.
Features 👇👇 #

Customizable Appearance: Customize the appearance of the OTP text fields to match your app's
design.
Automatic Focus Management: Conveniently switch between OTP input fields with automatic focus
management.
Callbacks and Submission: Trigger actions when the OTP changes or when the user submits the OTP.
Flexibility and Customization: Customize OTP length, input restrictions, and other options.
Flutter web support

Installing 🔧 #
Install the latest version from pub.
Installing #
Use this package as a library #
1. Depend on it #
Add this to your package's pubspec.yaml file:
dependencies:
flutter_dynamic_otp: ^0.0.1
copied to clipboard
2. Install it #
You can install packages from the command line:
with Flutter:
$ flutter packages get
copied to clipboard
Alternatively, your editor might support flutter packages get. Check the docs for your editor to
learn more.
3. Import it #
Now in your Dart code, you can use:
import 'package:flutter_dynamic_otp/flutter_dynamic_otp.dart';
copied to clipboard
Example Usage #
if you want an flutter_dynamic_otp with same style or with field shaped as a box

FlutterDynamicOTP(
digitsLength: 4,
onChanged: (value) {
// do something
},
digitDecoration: InputDecoration(
counter: const Offstage(),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 2,
color: Colors.blueAccent,
),
borderRadius: BorderRadius.circular(100),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
width: 2,
color: Colors.deepOrange,
),
borderRadius: BorderRadius.circular(100),
),
),
digitHeight: 100,
digitWidth: 65,
digitsPadding: 4,
textInputType: TextInputType.number,
onSubmit: (value) {
// do something
},),
copied to clipboard
Properties #
Customizable Properties for OtpTextField

Attribute Name
Example Value
Description

digitsLength
4
The default is 4


digitDecoration
InputDecoration
pass your own input decoration


textInputType
TextInputType.number
Just like TextField's keyboardType, the default is TextInputType.number


digitWidth
50
pass your own digit width


digitHeight
80
pass your own digit height


digitsPadding
8.0
pass your own digit padding


onChanged

Just like TextField's onChanged


onSubmit

Just like TextField's onSubmited


Developers : #
Mohammed Louay Shabaqji gitlab.
Mohammed Ali Al-Turkumani gitlab.