Floating panel

The same keyboard in a panel the user can drag, sitting above the UI rather than inside it.

Install#

flutter pub add virtual_keypad

import 'package:virtual_keypad/virtual_keypad.dart';

Why float it#

A docked keyboard takes 280 pixels off the bottom of the screen for as long as it is visible. On a form that is fine. On a map, a table, or a seating chart it hides the thing the user is trying to type about. A floating panel can be moved out of the way instead.

The panel#

VirtualKeypadFloating(
  standalone: true,
  width: 360,
  height: 280,
  borderRadius: 20,
  theme: VirtualKeypadTheme.dark,
  child: Column(
    children: [
      TextField(controller: controller),
    ],
  ),
)

child is your normal screen. The panel is drawn over it, so nothing in your layout shifts when the keyboard appears. Everything the docked keypad accepts works here too, including enableEmojiKey, type, customLayout and feedback.

Keeping it on screen#

By default the panel follows focus and goes away when nothing is focused. On a kiosk or POS screen you usually want it always there, which is what persistent mode is for.

final floating = VirtualKeypadFloatingController();

VirtualKeypadFloating(
  controller: floating,
  visibilityMode: VirtualKeypadFloatingVisibilityMode.persistent,
  width: 420,
  borderRadius: 20,
  child: MyScreen(),
)

floating.show();
floating.hide();
floating.toggle();

The controller is required in persistent mode, and the constructor asserts if it is missing, since a persistent panel with no way to dismiss it would trap the user.

Docking#

The panel header carries dock-to-top and dock-to-bottom buttons alongside close, so a user who has dragged it somewhere awkward can snap it back without hunting for the right position.

Width on a large screen#

maxWidth caps how wide the panel grows, defaulting to 680. Without a cap, a full-width keyboard on a 27 inch POS display puts the two halves of QWERTY too far apart to use comfortably.

VirtualKeypadFloating(
  maxWidth: 520,
  child: MyScreen(),
)

Docked or floating#

Floating mode is additive. Existing docked code keeps working unchanged.