Search packages, repositories and app categories

custom_pin_screen cover
Package detailsv1.0.1

custom_pin_screen

A flutter package to add screens with custom keyboards and pins to your mobile application.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
429
Likes
49
Pub points
160

Install package

flutter pub add custom_pin_screen

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables developers to implement customizable pin entry screens with tailored keyboards for mobile and desktop applications. It supports secure input handling for PINs, OTPs, and passwords, offering flexibility in design and behavior. The package integrates seamlessly across Android, iOS, Web, macOS, Windows, and Linux, making it ideal for authentication flows requiring numeric or custom input. It provides a clean API for styling, validation, and callback handling.

Use cases

  • User authentication with PIN codes
  • One-time password (OTP) entry
  • Secure password input fields
  • Custom keyboard layouts for forms
  • Multi-platform app consistency

Key features

  • Customizable keyboard layout
  • Cross-platform support
  • Secure input handling
  • Configurable pin length
  • On-change and on-complete callbacks
  • Easy integration with existing UI

Suitable for

  • Developers building authentication flows
  • Apps requiring secure numeric input
  • Projects targeting multiple platforms
  • Teams wanting reusable pin components
  • UX-focused form implementations

Considerations

  • Requires manual handling of security best practices
  • Limited built-in validation beyond length
  • May need additional styling for complex designs
  • Not optimized for non-numeric inputs
  • Depends on platform-specific rendering behaviors

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

🔐 custom pin screen

codecov CI license PRs Welcome GitHub contributors GitHub last commit

A flutter package to add screens with custom keyboards and pins to your mobile application.

🎖 Installing

dependencies:
  custom_pin_screen: "^1.0.0"
⚡️ Import
import 'package:custom_pin_screen/custom_pin_screen.dart';

🎮 How To Use

Dart Usage
  • Pin Auth
onPressed: (){
    Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => PinAuthentication(
                      onChanged: (v) {
                        if (kDebugMode) {
                          print(v);
                        }
                      },
                      onSpecialKeyTap: () {},
                      specialKey: const SizedBox(),
                      useFingerprint: true,
                      onbuttonClick: () {},
                      submitLabel: const Text(
                        'Submit',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  ),
                );
    },
  • Custom Keyboard
Column(
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 35.0,
              vertical: 35.0,
            ),
            child: Text(
              "How much do you want to fund your wallet with",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
          ),
          Expanded(
              child: CustomAppKeyBoard(
            onChanged: (v) {
              if (kDebugMode) {
                print(v);
              }
            },
            onbuttonClick: () {
              if (kDebugMode) {
                print('clicked');
              }
            },
            maxLength: 4,
            submitLabel: const Text(
              'Proceed',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
            // ),
          ))
        ],
      )

For more info, please, refer to the main.dart in the example.

📸 ScreenShots

🐛 Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

❗️ Note

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

🤓 Developer(s)

Abada Samuel Oghenero

⭐️ License

MIT LICENSE

Categories

Source repository

Projects using this package

No data available yet.