How do I show an on-screen keyboard in Flutter?

Add VirtualKeypad(standalone: true) below your form. It finds the focused TextField on its own and matches its keyboardType, with no controller changes.

Can I use a virtual keyboard on Flutter desktop and web?

Yes. The keyboard is a plain widget with no platform channels, so it runs on Android, iOS, Windows, macOS, Linux and web alike.

How do I build a PIN pad in Flutter?

Pass type: KeyboardType.custom with a customLayout describing the keys. A four-row grid of digits plus backspace and done is the usual PIN pad.

An on-screen keyboard for Flutter

A virtual keyboard widget you draw yourself, for the screens where the system keyboard will not do.

Install#

flutter pub add virtual_keypad

import 'package:virtual_keypad/virtual_keypad.dart';

Why draw your own keyboard#

The system keyboard is fine until it is not. A kiosk in fullscreen has none. A POS terminal needs a fixed pad that never covers the total. A TV has only a remote. A desktop app wants a keyboard the mouse can use. In all of those the input has to come from a widget you control.

The smallest thing that works#

Add standalone: true and the keyboard finds the focused field on its own. No wrapper, no controller swap, no change to the form you already wrote.

Column(
  children: [
    TextField(controller: controller),
    VirtualKeypad(standalone: true),
  ],
)

It reads each field's keyboardType and switches layout to match, so an email field gets @ and . and a number field gets a numeric pad. See using it with any TextField.

What is in the box#

QWERTY, email, URL, number, phone and multiline layouts, picked from the field.
Numeric keypads and PIN pads from a layout you define.
A draggable floating panel that sits above the UI instead of taking a slice of it.
12 languages including right to left, with a long-press language picker on the space bar.
An emoji page with a bundled font, so it renders on a first offline web load.
D-pad navigation for TV remotes and set-top boxes.
Theming down to key colour, radius, text size and the focus highlight.

Three ways to wire it up#

Mode	Use when
`standalone: true`	You have ordinary `TextField`s and want the least change
`VirtualKeypadScope`	You want full control of the text through a controller
`VirtualKeypadFloating`	The keyboard should float over the UI and be draggable

Confirming a key press#

A touchscreen gives no tactile confirmation on its own, which on a kiosk is often the only signal that a tap registered.

VirtualKeypad(feedback: KeyFeedback.both)   // click and a light vibration

KeyFeedback.sound is the default and is what the keyboard already did. haptic, both and none are the other options.

Where to start#

Wire it to an existing TextField first. If you are building a payment or entry screen, go straight to numeric and PIN pads. For a fullscreen terminal, read kiosk and POS.