tappy_keyboard 3.3.0

An embedded, customizable virtual keyboard plugin for Flutter apps with theming, custom layouts, and hotkey support.

Tappy Keyboard

A powerful and customizable embedded keyboard solution for Flutter applications, offering flexible layouts, theming, and hotkey support.

Table of Contents

• Features
• Installation
• Usage
• Customization
• Example
• Contributing
• License

Features

• 🎹 Customizable layouts
• 🔤 Multiple input types (numeric, alphanumeric)
• 🎨 Theming options with customizable colors and styles
• 📱 Responsive design for all screen sizes
• 🔄 Easy integration with existing Flutter apps
• 🎯 Animations & transitions
• 🔒 Secure input handling

[Tappy Keyboard in action]

[Tappy Keyboard in action]

Installation

Add the package to your pubspec.yaml:

flutter pub add tappy_keyboard

Usage

Here's a simple example of how to use the embedded keyboard:

import 'package:tappy_keyboard/tappy_keyboard.dart';

final controller = TappyKeyboardController();

TappyKeyboard(
    controller: controller,
    type: TappyKeyboardType.numeric,
    showOnFocus: false,
);

Register hotkeys by providing modifier keys and a callback:

Note:

Hotkeys only work when the on-screen keyboard has focus. If it loses focus (e.g., due to a touch or mouse interaction elsewhere), hotkey input will not be detected—even if the correct keys are pressed. You’ll need to refocus the keyboard and retype the hotkey, regardless of key order. This happens because the system only processes key events when the input widget is actively focused.

controller.addHotKey(
  TappyKeyboardHotKey(
    modifiers: [
      TappyKeyboardKeyData(keyAction: TappyKeyAction.ctl),
      TappyKeyboardKeyData(keyAction: TappyKeyAction.alt),
      TappyKeyboardKeyData(keyAction: TappyKeyAction.letter, text: 'q'),
    ],
    callback: () {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text("Hi Ctrl + Shift + A!"),
        ),
      );
    },
  ),
);

TappyKeyboard(
  controller: controller,
  type: TappyKeyboardType.alphanumeric,
  showAtSymbol: false,
  tabSpaceSize: 4,
  onTap: (key) {},
  child: Padding(
    padding: const EdgeInsets.all(40.0),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        for (int i = 1; i <= 15; i++)
          TextField(
            decoration: InputDecoration(
              label: Text("Input Field $i"),
            ),
          ),
      ],
    ),
  ),
);

Dispose the controller to free resources and prevent memory leaks

controller.dispose();

For more advanced usage and customization options, check out the example app in the /example directory.

Customization

The keyboard can be customized in various ways:

TappyKeyboard(
  controller: TappyKeyboardController(),
  theme: TappyKeyboardTheme(
    backgroundColor: Colors.transparent,
  ),
  type: TappyKeyboardType.numeric,
  onTap: (key){},
)

Example

Explore a full demo in the example folder.

Contributing

We welcome contributions! Please open an issue or submit a Pull Request for any improvements or bug fixes.

License

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