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 #

📦 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),
)

VirtualKeypad #

The on-screen keyboard widget.

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

VirtualKeypadController #

Extended TextEditingController with additional methods.

final controller = VirtualKeypadController();

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

⌨️ Keyboard Types #

🎨 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 #

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 #

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

VirtualKeypadTextField(
  controller: controller,
  allowPhysicalKeyboard: false,
)

VirtualKeypadScope(
  child: Column(
    children: [
      VirtualKeypadTextField(
        controller: emailController,
        keyboardType: KeyboardType.emailAddress,
      ),
      VirtualKeypadTextField(
        controller: phoneController,
        keyboardType: KeyboardType.phone,
      ),
      VirtualKeypad(), // Auto-switches 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 #

📄 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