virtual_keypad 0.1.1

A customizable virtual on-screen keyboard for Flutter with TextField integration. Supports multiple layouts, themes, and works on all platforms.

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