numpad_kit #

A fully customizable and themeable numeric keypad widget for Flutter that works seamlessly across all platforms (Android, iOS, macOS, Windows, Linux, and Web).

Screenshots #

Basic Numpad Themed Numpad Custom Builder

Features #

🎨 Fully Customizable - Change colors, sizes, shapes, and animations
🎯 Controller-Based - Manage state with NumpadController
⌨️ Keyboard Support - Physical keyboard input on web/desktop
📱 Cross-Platform - Works on all Flutter platforms
🔧 Custom Builders - Use your own button widgets
♿ Accessible - Meets accessibility guidelines
🌗 Theme Support - Built-in light and dark themes
➕ Extra Buttons - Optional customizable buttons

Installation #

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

dependencies:
  numpad_kit: ^0.0.1

Then run:

flutter pub get

Quick Start #

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Numpad(
            controller: NumpadController(
              onInput: (value) => print('Input: $value'),
              onSubmit: (value) => print('Submitted: $value'),
            ),
          ),
        ),
      ),
    );
  }
}

Usage #

Basic Numpad #

final controller = NumpadController(
  maxLength: 6,
  onInput: (value) {
    print('Current value: $value');
  },
  onDelete: () {
    print('Delete pressed');
  },
  onClear: () {
    print('Clear pressed');
  },
  onSubmit: (value) {
    print('Submitted: $value');
  },
);

Numpad(controller: controller)

Custom Theme #

NumpadTheme(
  data: NumpadThemeData(
    buttonColor: Colors.blue,
    buttonTextColor: Colors.white,
    buttonShape: NumpadButtonShape.circle,
    buttonSize: 80.0,
    spacing: 16.0,
  ),
  child: Numpad(controller: controller),
)

Using Built-in Themes #

// Light theme
NumpadTheme(
  data: NumpadThemeData.light(),
  child: Numpad(controller: controller),
)

// Dark theme
NumpadTheme(
  data: NumpadThemeData.dark(),
  child: Numpad(controller: controller),
)

Extra Buttons #

Add optional buttons beside the "0" button:

Numpad(
  controller: controller,
  showLeftExtraButton: true,
  leftExtraButton: Icon(Icons.backspace),
  onLeftExtraButton: () => controller.deleteDigit(),
  showRightExtraButton: true,
  rightExtraButton: Icon(Icons.check),
  onRightExtraButton: () => controller.submit(),
)

Custom Button Builder #

Create completely custom button widgets:

Numpad(
  controller: controller,
  buttonBuilder: (context, value, onPressed, isEnabled) {
    return ElevatedButton(
      onPressed: isEnabled ? onPressed : null,
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(20),
      ),
      child: Text(
        value,
        style: TextStyle(fontSize: 24),
      ),
    );
  },
)

Keyboard Input #

The numpad automatically supports keyboard input on web and desktop platforms:

0-9: Enter digits
Backspace: Delete last digit
Enter: Submit
Escape: Clear all

To disable keyboard input:

Numpad(
  controller: controller,
  enableKeyboardInput: false,
)

NumpadController #

The NumpadController manages the numpad's state and provides callbacks:

Properties #

value - Current input value as a string
length - Length of current value
isEmpty - Whether value is empty
isNotEmpty - Whether value is not empty

Methods #

addDigit(String digit) - Add a digit to the value
deleteDigit() - Remove the last digit
clear() - Clear all digits
submit() - Submit the current value
setValue(String value) - Set value programmatically

Callbacks #

onInput(String value) - Called when a digit is added
onDelete() - Called when delete is triggered
onClear() - Called when clear is triggered
onSubmit(String value) - Called when submit is triggered

NumpadThemeData #

Customize every aspect of the numpad's appearance:

Colors #

backgroundColor - Background color of numpad
buttonColor - Default button color
buttonTextColor - Button text color
buttonBorderColor - Button border color
buttonHoverColor - Button color on hover (web/desktop)
buttonPressedColor - Button color when pressed
disabledButtonColor - Disabled button color
disabledTextColor - Disabled button text color

Dimensions #

buttonSize - Size of each button (width and height)
spacing - Spacing between buttons
buttonPadding - Padding inside buttons
numpadPadding - Padding around entire numpad

Shape #

buttonShape - Shape of buttons (circle, square, roundedSquare)
borderRadius - Border radius for rounded buttons
borderWidth - Width of button borders

Typography #

textStyle - Text style for button labels

Animation #

animationDuration - Duration of button animations
animationCurve - Curve for button animations
pressedScale - Scale factor when pressed (0.0 to 1.0)

Shadows #

shadows - List of box shadows for buttons

Button Shapes #

Three built-in button shapes:

NumpadButtonShape.circle        // Circular buttons
NumpadButtonShape.square        // Square buttons with sharp corners
NumpadButtonShape.roundedSquare // Square buttons with rounded corners

Platform Support #

Platform	Supported	Keyboard Input
Android	✅	❌
iOS	✅	❌
Web	✅	✅
macOS	✅	✅
Windows	✅	✅
Linux	✅	✅

Example App #

Check out the example directory for a complete demo app showcasing:

Basic numpad usage
Custom themes
Extra buttons
Custom button builders

To run the example:

cd example
flutter run

Accessibility #

The numpad follows accessibility best practices:

Minimum touch target size of 48x48 logical pixels
Semantic labels for screen readers
Keyboard navigation support
Sufficient color contrast ratios

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

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

Author #

Created with ❤️ by the Flutter community

Changelog #

See CHANGELOG.md for a list of changes.

numpad_kit 0.0.2 numpad_kit: ^0.0.2 copied to clipboard

Metadata