The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

Overview

flutter_otp_text_field

pub package License: MIT GitHub top language

flutter_otp_text_field

The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin. It supports all the platforms flutter supports.

Features 👇 👇

  • allows you to customize the shape of textField in any way you want
  • built-in 2 commonly used pin styles of shape
  • obscure support
  • input decoration support
  • support all the textField properties support
  • 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_otp_text_field: ^1.0.0

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_otp_text_field/flutter_otp_text_field.dart';

Example Usage 1

if you want an otp_text_field with same style or with field shaped as a box

    OtpTextField(
        numberOfFields: 5,
        borderColor: Color(0xFF512DA8),
        //set to true to show as box or false to show as dash
        showFieldAsBox: true, 
        //runs when a code is typed in
        onCodeChanged: (String code) {
            //handle validation or checks here           
        },
        //runs when every textfield is filled
        onSubmit: (String verificationCode){
            showDialog(
                context: context,
                builder: (context){
                return AlertDialog(
                    title: Text("Verification Code"),
                    content: Text('Code entered is $verificationCode'),
                );
                }
            );
        }, // end onSubmit
    ),

Example Usage 2

if you want an otp_text_field with different styles for each field

    // if you want an otp_text_field with different 
    // styles for each field

    Color accentPurpleColor = Color(0xFF6A53A1);
    Color primaryColor = Color(0xFF121212);
    Color accentPinkColor = Color(0xFFF99BBD);
    Color accentDarkGreenColor = Color(0xFF115C49);
    Color accentYellowColor = Color(0xFFFFB612);
    Color accentOrangeColor = Color(0xFFEA7A3B);

    otpTextStyles = [
        createStyle(accentPurpleColor),
        createStyle(accentYellowColor),
        createStyle(accentDarkGreenColor),
        createStyle(accentOrangeColor),
        createStyle(accentPinkColor),
        createStyle(accentPurpleColor),
    ];

    TextStyle? createStyle(Color color) {
        ThemeData theme = Theme.of(context);
        return theme.textTheme.headline3?.copyWith(color: color);
    }

    OtpTextField(
            numberOfFields: 6,
            borderColor: accentPurpleColor,
            focusedBorderColor: accentPurpleColor,
            styles: otpTextStyles,
            showFieldAsBox: false,
            borderWidth: 4.0,
            //runs when a code is typed in
            onCodeChanged: (String code) {
                //handle validation or checks here if necessary         
            },
            //runs when every textfield is filled 
            onSubmit: (String verificationCode) {

            }, 
    ),

Properties

Customizable Properties for OtpTextField

Attribute Name Example Value Description
numberOfFields 4 The default is 4
fieldWidth 40 allows to change the width of the textField
showFieldAsBox true changes the default decoration of the textFields to a box with borderRadius of 4.0
hasCustomInputDecoration true set this to true if you want to pass your own decoration
decoration InputDecoration set hasCustomInputDecoration to true and pass your own input decoration the way you see fit
filled false set to true if you want to pass a fillColor
fillColor Color(0xFFFFFFFF) pass fillColor and set filled to true
enabledBorderColor Color(0xFF4F44FF) Pass Color value to show when textfield is enabled
focusedBorderColor Color(0xFF4F44FF) Pass Color value to show when textfield is in focus
borderColor Color(0xFFE7E7E7) Pass Color value to set border color
disabledBorderColor Color(0xFFE7E7E7) Pass Color value to show when textfield is disabled
styles List Pass a list of textStyles to customize the styles of each field. TextStyle in each index matches each field. Note that length of the styles array should be equal to the numberOfFields
borderRadius BorderRadius.all(Radius.circular(4.0)) pass BorderRadius to customise textField when showFieldAsBox is set to true
margin EdgeInsets.only(right: 8.0) customize the margin between each textField
textStyle TextStyle(fontSize: 20, color: Colors.green); Add custom textStyle
borderWidth 2.0 Default value is 2.0, allows you to customize the width of the border
cursorColor Colors.blue Change color of textFields cursor. Defaults to [ThemeData.cursorColor] or [CupertinoTheme.primaryColor] depending on [ThemeData.platform].
mainAxisAlignment MainAxisAlignment.center Defaults to MainAxisAlignment.center
crossAxisAlignment CrossAxisAlignment.center Defaults to CrossAxisAlignment.center
onSubmit (String pin){} The callback will execute when user is done inputting the verification code.
keyboardType TextInputType.number Just like TextField's keyboardType, the default is TextInputType.number
autoFocus false Same as TextField's autoFocus, the default is false
enabled true Same as TextField's enabled, the default is true
obscureText false Defaults to false
onCodeChanged (String code){} Executes every time a value is entered into the textField. Same as TextField's onChanged
You might also like...

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

Spannable Grid The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid. Feature

Nov 7, 2022

An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

Jan 8, 2023

A camera picker in WeChat style.

A camera picker in WeChat style.

A camera picker which is an extension for wechat_assets_picker. Based on camera for camera functions and photo_manager for asset implementation.

Dec 28, 2022

Helps to turn some popular widgets into Neumorphism style

Helps to turn some popular widgets into Neumorphism style

Helps to turn some popular widgets into Neumorphism style. Features NeumorphicCard: a card with Neumorphism look and feel NeumorphicButton: implements

Jun 27, 2022

Cupertino_lists - an implementation of iOS-style lists (grouped and inset grouped).

Cupertino_lists - an implementation of iOS-style lists (grouped and inset grouped).

cupertino_lists cupertino_lists is an implementation of iOS-style lists (grouped and inset grouped). Warning: This package probably will not be mainta

Nov 3, 2022

Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

align_positioned Widgets in this package: AlignPositioned AnimatedAlignPositioned AnimChain Why are these widgets an indispensable tool? When your des

Dec 12, 2022

Flutter package which helps you to implement Ticket Widget in your app.

Flutter package which helps you to implement Ticket Widget in your app.

✨ Ticket Widget Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and it is an updated null safe v

Dec 30, 2022

Dialog-manager - A Flutter package that allows for neater declaration, abstraction and use of customisable dialogs

flutter_dialog_manager A Flutter package that allows for neater declaration, abs

Dec 28, 2022

Display simple blurry dialog popup for flutter

Display simple blurry dialog popup for flutter

Blurry Dialog Features Display simple blurry dialog popup Offer built-in themes Possibility to create you custom dialog button click handler callbacks

Dec 18, 2022
Comments
  • Failed assertion: line 69 pos 15: 'color != null': is not true.

    Failed assertion: line 69 pos 15: 'color != null': is not true.

    import 'package:flutter/material.dart'; import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';

    class OtpScreen extends StatefulWidget { @override _OtpState createState() => _OtpState(); }

    class _OtpState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: false, // leading: IconButton( // icon: Icon( // Icons.keyboard_backspace, // ), // onPressed: ()=>Navigator.pop(context), // ), centerTitle: true, title: Text( "OTP", ), elevation: 0.0, ),

      body: Container(
        child: Padding(
          padding: EdgeInsets.all(8.0),
          child: OtpTextField(
            numberOfFields: 5,
            borderColor: Color(0xFF512DA8),
            showFieldAsBox: true,
            onCodeChanged: (String value) {
    
            },
            onSubmit: (String verificationCode){
              //navigate to different screen code goes here
              showDialog(
                  context: context,
                  builder: (context){
                    return AlertDialog(
                      title: Text("Verification Code"),
                      content: Text('Code entered is $verificationCode'),
                    );
                  }
              );
            }, // end onSubmit
          ), // end PinEntryTextField()
        ), // end Padding()
      ), 
    );
    

    } }

    My code

    opened by isaacdarcilla 2
  • Unable to set textfield to readOnly

    Unable to set textfield to readOnly

    So, say for instance you want to create a custom numeric key to use with the text field, it's not possible to set the textfield to readOnly so that you can use your custom numeric keyboard. For example a screen like this:

    https://res.cloudinary.com/dchsw3ztg/image/upload/v1639745208/raiseIssue_qxte6f.png

    opened by k1ycee 0
  • EnabledBorderColor is not set as required and no default value is set for it

    EnabledBorderColor is not set as required and no default value is set for it

    EnabledBorderColor is not set as required and no default value is set for it, So if not enabled border color is set, it crashes the app because there's is an assertion that states that enabled border color must not be null. To reproduce the error, use the otp_textfield widget with passing the enabled border color

    opened by evicoach 0
Owner
David-Legend
Software Engineer | Open-source Enthusiast | Fluent in flutter, dart | I create amazing high performance mobile apps that impacts peoples lives
David-Legend
Responsive Widgets Prefix allows you to add the "Responsive" prefix to any widget that needs scaling or font size increases

Responsive Widgets Prefix allows you to add the Responsive prefix to any widget that needs scaling or font size increases (for varying device screen sizes).

The Mobile Applications Community 2 Apr 18, 2022
A Flutter widget to show a text form field to display a date or clock dialog

A Flutter widget to show a text form field to display a date or clock dialog. This widget extend TextField and has a similar behavior as TextFormField.

m3uzz Soluções em TI 82 Jan 6, 2023
The color of the widget is different with the counter application

GoldenTestのお試しをしてみた https://pub.dev/packages/golden_toolkit このライブラリを使って、検証する ちなみにマスターのスクリーンショットをGoldenというらしい。 カウンターアプリでWidgetのカラーが違う場合をテストしてみた OK想定 NG

MatsumaruTsusyoshi 0 Oct 18, 2021
A widget that imposes different constraints on its child than it gets from its parent

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent. Similar to `OverflowBox` except that the unconstrained width or height is sized to the intrinsic size of the child, instead of being assumed to be infinite, which allows IntrinsicSizeOverflowBox to be used in a `Scrollable` widget.

Ron Booth 3 Dec 7, 2022
A repository to create and compare different methodologies of reusing local widget state logics.

A repository to create and compare different methodologies of reusing local widget state logics.

Tim Whiting 18 Dec 31, 2022
A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

toggle_bar A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android. Installation Depend on it. dependencies:

Prem Adithya 9 Jul 13, 2022
An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension

Flutter Next Now build flutter apps with ease and responsive. An advanced flutter package to build responsive application accross all platform with ea

Shashi Kumar 10 Dec 29, 2022
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.

Irfan Vigma Taufik 332 Dec 20, 2022
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

AliYigitBireroglu 101 Dec 16, 2022