secure_pin_input 0.0.1

A customizable and secure PIN input field widget for Flutter apps.

example/lib/main.dart

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

void main() {
  runApp(const SecurePinInputExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Secure PIN Input Demo',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        inputDecorationTheme: const InputDecorationTheme(
          fillColor: Color(0xFFE0F7FA),
        ),
      ),
      home: const SecurePinInputDemo(),
    );
  }
}

class SecurePinInputDemo extends StatefulWidget {
  const SecurePinInputDemo({super.key});

  @override
  State<SecurePinInputDemo> createState() => _SecurePinInputDemoState();
}

class _SecurePinInputDemoState extends State<SecurePinInputDemo> {
  String _enteredPin = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Secure PIN Input Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          children: [
            SecurePinInput(
              length: 6,
              onCompleted: (pin) {
                setState(() {
                  _enteredPin = pin;
                });
              },
              obscureText: true,
              enableClipboardAutofill: true,
              fillColor: Colors.transparent,
              validator: (value) {
                if (value.length != 6) return 'PIN must be 6 digits';
                if (value != '123456') return 'Invalid PIN';
                return null;
              },
              boxDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.indigo),
              ),
              textStyle:
                  const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),
            Text(
              'Entered PIN: $_enteredPin',
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}