Emoji

An emoji page behind a key on the keyboard, with the font problem on web already solved.

Install#

flutter pub add virtual_keypad

import 'package:virtual_keypad/virtual_keypad.dart';

Turning it on#

VirtualKeypad(
  standalone: true,
  enableEmojiKey: true,
)

That adds an emoji key to the layout. Press it and the keyboard swaps to the emoji page, with a key to come back.

To open on the emoji page instead of the letters, which suits a reaction picker or a comment box:

VirtualKeypad(
  standalone: true,
  enableEmojiKey: true,
  showEmojiKeyboardInitially: true,
)

Why a font ships with the package#

On web, Flutter downloads a fallback emoji font on demand. That works once the network has been there, and fails on a first offline load: the emoji page renders as blank boxes with no error to explain it.

The package bundles Noto Emoji, subset to the 1271 codepoints the picker actually uses, and applies it on web only. Native platforms keep their own colour emoji font, which is better than any font a package could ship.

Colour emoji on web#

The bundled font is monochrome, which is the trade for a font small enough to bundle. If you want colour on web, supply a colour font and it is used instead.

VirtualKeypad(
  enableEmojiKey: true,
  colorEmojiFontLoader: () async {
    final bytes = await rootBundle.load('assets/NotoColorEmoji.ttf');
    return bytes;
  },
)

The loader is called once, lazily, the first time the emoji page opens, so a large colour font does not cost anything on screens that never show emoji.

Hiding emoji the platform cannot draw#

Newer emoji render as a blank box on older devices. Off by default, because the check costs a measurement pass over the set.

VirtualKeypad(
  enableEmojiKey: true,
  checkEmojiPlatformCompatibility: true,
)

Worth turning on if your users are on older Android, where the gap between what the picker offers and what the system font has is widest.

Styling#

VirtualKeypad(
  enableEmojiKey: true,
  emojiTextStyle: const TextStyle(fontSize: 28),
)

What the emoji key inserts#

An emoji goes in as text at the cursor, like any other character, so onChanged, validators and length counters all see it. Many emoji are more than one code unit, so count characters with a grapheme-aware method if a length limit matters.