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.

Libraries

flutter_dynamic_otp