Virtual Keypad

A fully customizable virtual on-screen keyboard for Flutter

Perfect for kiosk applications, password entry UIs, custom input interfaces, and any application requiring system keyboard suppression.

✨ Features

Feature	Description
🎹 Multiple Layouts	Text, numeric, phone, email, URL, or fully custom layouts
🌍 Multi-Language	Built-in English & Bengali, easily extensible
📝 Smart TextField	Auto-adapts keyboard based on input type
⌨️ Physical Keyboard	Optional dual input mode (virtual + physical)
🎨 Themeable	Light, dark, or custom themes
📱 Cross-Platform	Mobile, web, and desktop support
⚡ Full Editing	Selection, copy/paste, cursor control
🔒 Password Mode	Secure text obscuring
🔄 Auto-Hide	Animated show/hide on focus change

📦 Installation

Add to your pubspec.yaml:

dependencies:
  virtual_keypad: ^0.1.1

flutter pub get

🚀 Quick Start

import 'package:virtual_keypad/virtual_keypad.dart';

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = VirtualKeypadController();

  @override
  void initState() {
    super.initState();
    initializeKeyboardLayouts();
  }

  @override
  Widget build(BuildContext context) {
    return VirtualKeypadScope(
      child: Column(
        children: [
          VirtualKeypadTextField(
            controller: controller,
            decoration: InputDecoration(labelText: 'Enter text'),
          ),
          VirtualKeypad(),
        ],
      ),
    );
  }
}

💡 Three components work together: VirtualKeypadScope → VirtualKeypadTextField → VirtualKeypad

📖 Core Components

VirtualKeypadScope

Required wrapper connecting text fields to the keyboard.

VirtualKeypadScope(
  child: Column(
    children: [
      VirtualKeypadTextField(controller: controller1),
      VirtualKeypadTextField(controller: controller2),
      VirtualKeypad(), // Auto-connects to focused field
    ],
  ),
)

VirtualKeypadTextField

Drop-in TextField replacement with virtual keyboard integration.

VirtualKeypadTextField(
  controller: controller,
  keyboardType: KeyboardType.emailAddress,
  obscureText: false,
  allowPhysicalKeyboard: false,  // Block system keyboard
  onSubmitted: (value) => print(value),
)

Property	Type	Default	Description
`controller`	`VirtualKeypadController`	required	Text controller
`keyboardType`	`KeyboardType`	`text`	Keyboard layout type
`obscureText`	`bool`	`false`	Password mode
`allowPhysicalKeyboard`	`bool`	`false`	Enable system keyboard
`maxLength`	`int?`	`null`	Character limit
`maxLines`	`int`	`1`	Line count

VirtualKeypad

The on-screen keyboard widget.

VirtualKeypad(
  height: 280,
  theme: VirtualKeypadTheme.dark,
  hideWhenUnfocused: true,
)

Property	Type	Default	Description
`type`	`KeyboardType?`	`null`	Override layout (auto if null)
`height`	`double`	`280`	Keyboard height
`theme`	`VirtualKeypadTheme`	`light`	Visual theme
`hideWhenUnfocused`	`bool`	`false`	Auto-hide animation
`customLayout`	`KeyboardLayout?`	`null`	Custom key arrangement

VirtualKeypadController

Extended TextEditingController with additional methods.

final controller = VirtualKeypadController();

controller.insertText('Hello');
controller.deleteBackward();
controller.selectAll();
controller.clear();
controller.cursorPosition = 5;

⌨️ Keyboard Types

Type	Layout	Use Case
`text`	Full QWERTY	General text input
`emailAddress`	QWERTY + `@` `.`	Email fields
`url`	QWERTY + `/` `:` `.`	URL fields
`number`	0-9, decimal	Numeric input
`numberSigned`	0-9, `-`, decimal	Signed numbers
`phone`	Phone dialer	Phone numbers
`multiline`	QWERTY + newline	Text areas
`custom`	User-defined	Custom layouts

🎨 Theming

Built-in Themes

VirtualKeypad(theme: VirtualKeypadTheme.light)
VirtualKeypad(theme: VirtualKeypadTheme.dark)

Custom Theme

VirtualKeypad(
  theme: VirtualKeypadTheme(
    backgroundColor: Colors.grey[900]!,
    keyColor: Colors.grey[800]!,
    actionKeyColor: Colors.grey[700]!,
    keyTextColor: Colors.white,
    keyTextSize: 20,
    keyBorderRadius: 8,
  ),
)

🌍 Multi-Language Support

Built-in Languages

Code	Language	Layout
`en`	English	QWERTY
`bn`	Bengali	বাংলা

Switch Language

initializeKeyboardLayouts();

KeyboardLayoutProvider.instance.setLanguage('bn');  // Bengali
KeyboardLayoutProvider.instance.setLanguage('en');  // English

Add Custom Language

See Adding Languages Guide for detailed instructions.

🔧 Common Use Cases

Password Entry

VirtualKeypadTextField(
  controller: passwordController,
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    prefixIcon: Icon(Icons.lock),
  ),
)

Kiosk Mode (No System Keyboard)

VirtualKeypadTextField(
  controller: controller,
  allowPhysicalKeyboard: false,
)

Multi-Field Form

VirtualKeypadScope(
  child: Column(
    children: [
      VirtualKeypadTextField(
        controller: emailController,
        keyboardType: KeyboardType.emailAddress,
      ),
      VirtualKeypadTextField(
        controller: phoneController,
        keyboardType: KeyboardType.phone,
      ),
      VirtualKeypad(), // Auto-switches layout
    ],
  ),
)

Custom Layout

final pinLayout = [
  [
    VirtualKey.character(text: '1'),
    VirtualKey.character(text: '2'),
    VirtualKey.character(text: '3'),
  ],
  [
    VirtualKey.character(text: '4'),
    VirtualKey.character(text: '5'),
    VirtualKey.character(text: '6'),
  ],
  [
    VirtualKey.character(text: '7'),
    VirtualKey.character(text: '8'),
    VirtualKey.character(text: '9'),
  ],
  [
    VirtualKey.action(action: KeyAction.backSpace),
    VirtualKey.character(text: '0'),
    VirtualKey.action(action: KeyAction.done, label: '✓'),
  ],
];

VirtualKeypad(
  type: KeyboardType.custom,
  customLayout: pinLayout,
)

📚 Documentation

Document	Description
API Reference	Complete API documentation
Custom Layouts	Creating custom keyboard layouts
Adding Languages	Multi-language implementation guide
Theming Guide	Customizing keyboard appearance
Examples	Full example applications

📄 License

MIT License - see LICENSE for details.

🤝 Contributing

Contributions welcome! Please read our Contributing Guide and submit PRs to the repository.

Made with ❤️ by Masum