flutter_dynamic_otp 0.0.6

Flutter package that provides a customizable OTP (One-Time Password)

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

2. Install it

You can install packages from the command line: with Flutter:

$ flutter packages get

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';

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

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.