onscreen_keypad 1.1.0

A customizable on-screen numeric keypad for Flutter apps. Ideal for PIN entry, authentication screens, and custom input fields with haptic feedback support.

example/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Keypad Example',
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const KeypadExampleScreen(),
    );
  }
}

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

  @override
  State<KeypadExampleScreen> createState() => _KeypadExampleScreenState();
}

class _KeypadExampleScreenState extends State<KeypadExampleScreen> {
  final KeypadController _controller = KeypadController(maxLength: 4);
  bool _shuffle = true;
  String? _message;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onCompleted(String pin) {
    setState(() => _message = pin == '1234' ? 'PIN accepted' : 'Wrong PIN');
    if (pin != '1234') {
      Future<void>.delayed(const Duration(milliseconds: 600), () {
        if (mounted) _controller.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Onscreen Keypad Example'),
        actions: [
          IconButton(
            tooltip: _shuffle ? 'Disable shuffle' : 'Enable shuffle',
            icon: Icon(_shuffle ? Icons.shuffle_on_outlined : Icons.shuffle),
            onPressed: () => setState(() => _shuffle = !_shuffle),
          ),
        ],
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 48),
            child: Column(
              children: [
                const Text('Enter your PIN'),
                const SizedBox(height: 24),
                PinIndicator(controller: _controller),
                const SizedBox(height: 16),
                Text(_message ?? ' '),
              ],
            ),
          ),
          KeypadTheme(
            data: KeypadThemeData(
              keyShape: BoxShape.circle,
              keyPadding: const EdgeInsets.all(20),
              keySplashColor: Theme.of(context).colorScheme.primaryContainer,
            ),
            child: OnScreenKeyPad(
              controller: _controller,
              onCompleted: _onCompleted,
              shuffle: _shuffle,
              reshuffleMode: ReshuffleMode.everyEntry,
              enableHapticFeedback: true,
              hapticFeedbackType: HapticFeedbackType.selectionClick,
              rightButtonAction: IconButton(
                icon: const Icon(Icons.fingerprint),
                iconSize: 36,
                onPressed: () => setState(() => _message = 'Biometrics…'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}