PinCode

A flexible and fully customizable widget for PIN, OTP, and passcode entry. Perfect for verification screens, 2FA, transaction confirmations, and more.

Example of PinCode with different themes and error animation.

Features

• Zero Dependencies: Full control and stability with no third-party libraries.
• Highly Customizable: Extensive styling options via the PinTheme class to match your app's design.
• Core Functionality: Includes error animations, clipboard support (paste), keyboard management, and form validation.
• Modern & Standard: Built with modern Flutter practices, including null safety and a simple, predictable API.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  pin_code: ^1.0.2

Then, run flutter pub get and import it in your Dart code:

import 'package:pin_code/pin_code.dart';

Basic Usage

Here is a simple example of how to use PinCode:

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

class BasicExample extends StatelessWidget {
  const BasicExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PinCode Basic Usage'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: PinCode(
            appContext: context,
            length: 4,
            onChanged: (value) {
              print(value);
            },
            onCompleted: (value) {
              print("Completed: $value");
              // Show a dialog or navigate to the next screen
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: const Text("Success"),
                  content: Text("PIN Verified: $value"),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Customization

You can extensively customize the appearance of the fields using the pinTheme property. Create a PinTheme object and modify its properties. It's recommended to use the copyWith method on a default theme.

Here's an example of a customized "box" style field:

PinCode(
  appContext: context,
  length: 6,
  keyboardType: TextInputType.number,
  // obscureText: true, // Use this for password-like fields
  // obscuringCharacter: '●',
  pinTheme: PinTheme(
    shape: PinCodeFieldShape.box,
    borderRadius: BorderRadius.circular(8),
    fieldHeight: 50,
    fieldWidth: 45,
    // Colors for different states
    activeColor: Colors.deepPurple,
    activeFillColor: Colors.white,
    selectedColor: Colors.deepPurple,
    selectedFillColor: Colors.deepPurple.withOpacity(0.1),
    inactiveColor: Colors.grey,
    inactiveFillColor: Colors.white,
    disabledColor: Colors.grey.shade200,
    errorBorderColor: Colors.redAccent,
  ),
  enableActiveFill: true, // Set to true to use the fill colors
  onCompleted: (value) {
    print("Completed: $value");
  },
)

Main Properties

Acknowledgments

PinCode is a modernized and simplified version of the pin_code_fields library.

Contributing

Contributions are welcome! If you find a bug or want to suggest a new feature, please feel free to open an issue or submit a pull request.

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/my-new-feature).
3. Commit your changes (git commit -am 'Add some feature').
4. Push to the branch (git push origin feature/my-new-feature).
5. Open a new Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.