How do I make a Flutter keyboard work with a TV remote?

Set enableDpadNavigation: true. Arrow keys move a highlight between keys and select or enter presses the highlighted one.

Why does space not press the highlighted key?

Because a Bluetooth keyboard paired to a TV is common, and space there should type a space. Select, enter and the primary gamepad button press the key.

How do I style the D-pad focus highlight?

Use the theme's focusBorderColor, focusBorderWidth and focusColor. On a television, use a fill and an outline together so the highlight reads from across a room.

Android TV and D-pad

On a television the only input device is a directional pad, so every key has to be reachable with four arrows and a select button.

Install#

flutter pub add virtual_keypad

import 'package:virtual_keypad/virtual_keypad.dart';

Turning it on#

VirtualKeypad(
  standalone: true,
  enableDpadNavigation: true,
  theme: VirtualKeypadTheme.dark.copyWith(
    focusBorderColor: Colors.amber,
    focusBorderWidth: 4,
  ),
)

One key is highlighted at a time. Arrow keys move the highlight, and select, enter or the primary gamepad button presses it.

Moving between rows#

Keyboard rows are not the same length, so a naive index-based move lands somewhere unrelated when going up or down. Moving vertically picks the key in the next row that sits closest horizontally, which keeps wide keys such as space and shift reachable instead of being skipped past.

Two decisions worth knowing about#

Space does not press the highlighted key. Pairing a Bluetooth keyboard to a TV is common, and someone typing there expects space to type a space rather than fire whatever the highlight happens to be on.

An arrow at the edge of the grid is left unhandled. That lets your app move focus off the keyboard and on to the rest of the screen, rather than trapping the user inside a grid they cannot leave.

Make the highlight obvious#

A television is watched from across a room, so a subtle highlight is no highlight at all.

VirtualKeypadTheme.dark.copyWith(
  focusBorderColor: Colors.amber,
  focusBorderWidth: 4,
  focusColor: Colors.amber.withValues(alpha: 0.15),
)

focusColor fills the highlighted key, focusBorderColor outlines it. Using both reads better at distance than either alone.

Confirming a press without a click#

A remote gives no tactile confirmation and a TV has no vibration motor, so sound is the only channel available.

VirtualKeypad(
  enableDpadNavigation: true,
  feedback: KeyFeedback.sound,
)

Feedback fires for D-pad activation as well as taps, so the confirmation does not depend on how the key was reached.

Only one keyboard responds#

If two keypads are mounted at once, only the visible one consumes a D-pad press. Without that rule a hidden keyboard offscreen would silently eat the remote input and the visible one would appear frozen.