How do I add a keyboard to a Flutter kiosk app?

Use VirtualKeypadFloating with a controller and persistent visibility, or a docked VirtualKeypad with standalone: true. Neither needs a system keyboard to be present.

Why is there no keyboard on my kiosk device?

A device locked to one app often has no system keyboard available at all. Drawing your own with a widget is the reliable way to accept input there.

How do I make keys easier to hit on a terminal?

Raise the keyboard height and the theme's keyTextSize, and widen horizontalGap and verticalGap. Defaults assume a phone held close, not someone standing at a screen.

Kiosk and POS

Fullscreen terminals have no system keyboard, so the input has to come from a widget you control.

Install#

flutter pub add virtual_keypad

import 'package:virtual_keypad/virtual_keypad.dart';

What makes a kiosk different#

Three things, and they push in the same direction. There is often no system keyboard at all, because the device is locked to one app. The screen is fixed, so a keyboard that slides in and pushes the layout is worse than one that is simply always there. And the user is a stranger who will not persist through a confusing screen.

An always-visible pad#

final floating = VirtualKeypadFloatingController(initialVisible: true);

VirtualKeypadFloating(
  controller: floating,
  visibilityMode: VirtualKeypadFloatingVisibilityMode.persistent,
  standalone: true,
  width: 720,
  maxWidth: 720,
  theme: VirtualKeypadTheme.dark,
  feedback: KeyFeedback.both,
  child: OrderScreen(),
)

Persistent visibility means the keyboard does not appear and disappear with focus, which on a terminal reads as the screen glitching rather than as a feature.

Confirm every press#

A kiosk screen is often behind glass, under bright light, and touched by someone wearing gloves. The visual key preview may be the only confirmation, and it is easy to miss.

VirtualKeypad(feedback: KeyFeedback.both)

Both effects follow the device's own settings, so a terminal with sound disabled stays silent and one with no vibration motor skips the haptic rather than failing.

Size the keys for standing users#

Default key sizing assumes a phone held close. Someone standing at a terminal is further away and less accurate, so bigger keys and wider gaps reduce mistypes more than any other single change.

VirtualKeypad(
  height: 340,
  theme: VirtualKeypadTheme.light.copyWith(
    keyTextSize: 26,
    keyBorderRadius: 10,
    horizontalGap: 8,
    verticalGap: 8,
  ),
)

Numbers only, where that is all you need#

An order number, a table number or a PIN does not need QWERTY. A custom numeric layout is faster to use and far harder to get wrong.

More than one language#

Public terminals rarely serve one language. Pass the ones you support and users reach the picker by long-pressing space.

VirtualKeypad(
  availableLanguages: ['en', 'ar', 'fr'],
  initialLanguage: 'en',
)

See languages and RTL for what is built in and how right to left is handled.