NumberKeypadAppi

A customizable numeric keypad widget for number input with flexible layout and styling options.

Features

• Numeric Input: Full 0-9 number pad with customizable layout
• Action Buttons: Configurable action buttons (clear, delete, submit)
• Custom Styling: Configurable button colors, sizes, and text styles
• Flexible Layout: Adjustable button spacing and grid configuration
• Callback Support: Easy handling of number input and actions
• Responsive Design: Adapts to different screen sizes

Usage

String currentInput = '';

NumberKeypadAppi(
  onNumberPressed: (String number) {
    setState(() {
      currentInput += number;
    });
  },
  onClearPressed: () {
    setState(() {
      currentInput = '';
    });
  },
  onDeletePressed: () {
    setState(() {
      if (currentInput.isNotEmpty) {
        currentInput = currentInput.substring(0, currentInput.length - 1);
      }
    });
  },
)

Parameters

Parameter	Type	Description
onNumberPressed	ValueChanged<String>	Required. Callback when a number button is pressed
onClearPressed	VoidCallback?	Callback when clear button is pressed
onDeletePressed	VoidCallback?	Callback when delete/backspace button is pressed
onSubmitPressed	VoidCallback?	Callback when submit/enter button is pressed
buttonHeight	double?	Height of keypad buttons (default: 60)
buttonWidth	double?	Width of keypad buttons (default: 80)
buttonSpacing	double?	Spacing between buttons (default: 8)
buttonColor	Color?	Background color of number buttons
buttonTextColor	Color?	Text color of number buttons
actionButtonColor	Color?	Background color of action buttons
actionButtonTextColor	Color?	Text color of action buttons
buttonTextStyle	TextStyle?	Text style for button labels
borderRadius	double?	Border radius for buttons (default: 8)
elevation	double?	Elevation for buttons (default: 2)
showClearButton	bool	Whether to show clear button (default: true)
showDeleteButton	bool	Whether to show delete button (default: true)
showSubmitButton	bool	Whether to show submit button (default: false)
clearButtonText	String?	Text for clear button (default: 'Clear')
deleteButtonText	String?	Text for delete button (default: '⌫')
submitButtonText	String?	Text for submit button (default: 'Enter')
padding	EdgeInsets?	Padding around the keypad

Examples

Basic Number Keypad

String pinCode = '';

Column(
  children: [
    Text(
      'Enter PIN: $pinCode',
      style: TextStyle(fontSize: 24),
    ),
    SizedBox(height: 20),
    NumberKeypadAppi(
      onNumberPressed: (String number) {
        if (pinCode.length < 4) {
          setState(() {
            pinCode += number;
          });
        }
      },
      onDeletePressed: () {
        if (pinCode.isNotEmpty) {
          setState(() {
            pinCode = pinCode.substring(0, pinCode.length - 1);
          });
        }
      },
      onClearPressed: () {
        setState(() {
          pinCode = '';
        });
      },
    ),
  ],
)

Custom Styled Keypad

NumberKeypadAppi(
  onNumberPressed: (String number) {
    // Handle number input
  },
  buttonHeight: 70,
  buttonWidth: 90,
  buttonSpacing: 12,
  buttonColor: Colors.blue[50],
  buttonTextColor: Colors.blue[900],
  actionButtonColor: Colors.red[100],
  actionButtonTextColor: Colors.red[900],
  buttonTextStyle: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
  borderRadius: 15,
  elevation: 4,
)

Calculator-Style Keypad

String calculation = '';

NumberKeypadAppi(
  onNumberPressed: (String number) {
    setState(() {
      calculation += number;
    });
  },
  onClearPressed: () {
    setState(() {
      calculation = '';
    });
  },
  onDeletePressed: () {
    if (calculation.isNotEmpty) {
      setState(() {
        calculation = calculation.substring(0, calculation.length - 1);
      });
    }
  },
  onSubmitPressed: () {
    // Perform calculation
    _performCalculation();
  },
  showSubmitButton: true,
  submitButtonText: '=',
  clearButtonText: 'AC',
  buttonColor: Colors.grey[200],
  actionButtonColor: Colors.orange,
  actionButtonTextColor: Colors.white,
)

Compact Keypad

NumberKeypadAppi(
  onNumberPressed: (String number) {
    // Handle input
  },
  buttonHeight: 45,
  buttonWidth: 60,
  buttonSpacing: 4,
  buttonTextStyle: TextStyle(fontSize: 18),
  borderRadius: 6,
  elevation: 1,
  showClearButton: false,
  showSubmitButton: false,
  padding: EdgeInsets.all(8),
)

Phone Dialer Style

String phoneNumber = '';

Column(
  children: [
    Container(
      padding: EdgeInsets.all(16),
      child: Text(
        phoneNumber.isEmpty ? 'Enter phone number' : phoneNumber,
        style: TextStyle(
          fontSize: 28,
          letterSpacing: 2,
        ),
      ),
    ),
    NumberKeypadAppi(
      onNumberPressed: (String number) {
        setState(() {
          phoneNumber += number;
        });
      },
      onDeletePressed: () {
        if (phoneNumber.isNotEmpty) {
          setState(() {
            phoneNumber = phoneNumber.substring(0, phoneNumber.length - 1);
          });
        }
      },
      onSubmitPressed: () {
        // Make call
        _makeCall(phoneNumber);
      },
      showSubmitButton: true,
      submitButtonText: '📞',
      showClearButton: false,
      buttonColor: Colors.white,
      buttonTextColor: Colors.black,
      actionButtonColor: Colors.green,
      actionButtonTextColor: Colors.white,
      elevation: 3,
    ),
  ],
)

Amount Input Keypad

String amount = '';

NumberKeypadAppi(
  onNumberPressed: (String number) {
    setState(() {
      amount += number;
    });
  },
  onClearPressed: () {
    setState(() {
      amount = '';
    });
  },
  onDeletePressed: () {
    if (amount.isNotEmpty) {
      setState(() {
        amount = amount.substring(0, amount.length - 1);
      });
    }
  },
  onSubmitPressed: () {
    // Process payment
    _processPayment(double.tryParse(amount) ?? 0);
  },
  showSubmitButton: true,
  submitButtonText: 'Pay',
  buttonColor: Colors.green[50],
  buttonTextColor: Colors.green[800],
  actionButtonColor: Colors.green,
  actionButtonTextColor: Colors.white,
  buttonTextStyle: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w600,
  ),
)

Best Practices

• Use appropriate button sizes for your target device and use case
• Provide clear visual feedback for button presses
• Consider the context when deciding which action buttons to show
• Use consistent styling that matches your app's design system
• Implement proper input validation and length limits
• Consider adding haptic feedback for better user experience
• Ensure sufficient spacing between buttons for accurate touch input
• Test on different screen sizes to ensure usability