Flutter Pinput: A Customizable and Feature-Rich Pin Code Input for Flutter

Published on by Flutter News Hub

Flutter Pinput: A Customizable and Feature-Rich Pin Code Input for Flutter

Flutter Pinput is a comprehensive and customizable pin code input package for Flutter. It offers a range of features to enhance the user experience and streamline development, making it ideal for applications requiring secure and user-friendly PIN input.

Key Features

  • Animated Decoration Switching: Seamlessly switch between different pin state decorations, such as default, focused, submitted, and error, to provide visual feedback to users.
  • Form Validation: Validate user input against custom rules and display error messages when necessary, ensuring data integrity.
  • SMS Autofill: Autofill OTP (One-Time Password) codes received via SMS on both iOS and Android devices, reducing manual input and enhancing convenience.
  • Custom Cursor: Personalize the pin input experience by customizing the cursor appearance, including shape, color, and animation.
  • Copy From Clipboard: Enable users to copy the pin code from the clipboard, making it easier to share or store securely.
  • Haptic Feedback: Provide tactile feedback on user interactions, enhancing the overall user experience.
  • Close Keyboard After Completion: Automatically close the keyboard once the pin code is complete, streamlining the input process.

Getting Started

To integrate Flutter Pinput into your project, follow these steps:

dependencies:
  pinput: ^2.2.21

Import the package:

import 'package:pinput/pinput.dart';

Create a Pinput widget:

Pinput(
  length: 6, // Number of pins
  defaultPinTheme: PinTheme(
    width: 56,
    height: 56,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
  ),
  focusedPinTheme: PinTheme(
    width: 56,
    height: 56,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blue),
    ),
  ),
  submittedPinTheme: PinTheme(
    width: 56,
    height: 56,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
    decoration: BoxDecoration(
      color: Colors.green,
    ),
  ),
  onCompleted: (pin) => print(pin), // Triggered when the pin is complete
);

Customization

Pinput offers extensive customization options to tailor the appearance and behavior of the pin code input. Customize pin themes, enable SMS autofill, modify cursor appearance, and more.

For example, to customize the default pin theme:

Pinput(
  defaultPinTheme: PinTheme(
    width: 56,
    height: 56,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.black,
      fontWeight: FontWeight.w600,
    ),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blue),
    ),
  ),
);

SMS Autofill

Enable SMS autofill to streamline OTP input:

For iOS:

Pinput(
  androidSmsAutofillMethod: AndroidSmsAutofillMethod.none,
);

For Android:

Pinput(
  androidSmsAutofillMethod: AndroidSmsAutofillMethod.smsRetrieverApi,
);

Conclusion

Flutter Pinput simplifies the implementation of secure and user-friendly pin code input. Its wide range of features and customization options make it an ideal solution for various applications, including authentication, OTP verification, and more.

Flutter News Hub