How do I change the keyboard colours in Flutter?

Pass a VirtualKeypadTheme, or call copyWith on one of the light and dark presets to change only the properties you care about.

Does the virtual keyboard follow my app theme?

Not automatically, since a keyboard often wants to differ from the app around it. Read Theme.of(context).brightness and pass the matching preset if you want it to follow.

How do I make the keys bigger?

Raise the keyboard height and the theme's keyTextSize, and increase horizontalGap and verticalGap. Distance from the screen matters more than screen size.

Theming

Two presets to start from, and every property on them can be replaced.

Install#

flutter pub add virtual_keypad

import 'package:virtual_keypad/virtual_keypad.dart';

The presets#

VirtualKeypad(theme: VirtualKeypadTheme.light)
VirtualKeypad(theme: VirtualKeypadTheme.dark)

Changing part of one#

copyWith is almost always what you want. Building a theme from scratch means restating every colour, and a value you forget is a default rather than an error.

VirtualKeypad(
  theme: VirtualKeypadTheme.dark.copyWith(
    keyBorderRadius: 12,
    keyTextSize: 24,
  ),
)

A theme of your own#

VirtualKeypad(
  theme: VirtualKeypadTheme(
    backgroundColor: Colors.grey[900]!,
    keyColor: Colors.grey[800]!,
    actionKeyColor: Colors.grey[700]!,
    keyTextColor: Colors.white,
    keyBorderRadius: 12,
  ),
)

Every property#

Property	Type	Default	What it does
`backgroundColor`	`Color`	`#D1D3D9`	Keyboard background
`keyColor`	`Color`	`#FFFFFF`	Character key background
`actionKeyColor`	`Color`	`#ADB3BC`	Action key background
`keyTextColor`	`Color`	`#1C1C1E`	Text and icon colour
`keyTextSize`	`double`	`22.0`	Font size
`keyBorderRadius`	`double`	`6.0`	Corner radius
`keyShadow`	`bool`	`true`	Key shadows
`splashColor`	`Color?`	`null`	Tap ripple colour
`horizontalGap`	`double`		Space between keys in a row
`verticalGap`	`double`		Space between rows
`focusBorderColor`	`Color?`	`keyTextColor`	D-pad highlight border
`focusBorderWidth`	`double`	`3.0`	D-pad highlight border width
`focusColor`	`Color?`	`null`	D-pad highlight fill

Following the app theme#

The keyboard does not read Theme.of(context) on its own, because a keyboard often wants to differ from the surrounding app. Wire it up yourself when you do want it to match.

final dark = Theme.of(context).brightness == Brightness.dark;

VirtualKeypad(
  theme: dark ? VirtualKeypadTheme.dark : VirtualKeypadTheme.light,
)

Sizing for the screen#

Colour is the easy part. The change that matters most is key size, and it depends entirely on how far away the user is.

Screen	Reasonable starting point
Phone	Defaults, held close and tapped with a thumb
Tablet or desktop	`keyTextSize: 24`, a little more gap
Kiosk or POS	`height: 340`, `keyTextSize: 26`, gaps at 8
Television	Dark theme, a strong focus highlight, large text