Flutekeyboard – Customizable, Multi-Language On-Screen Keyboard

🌐 Live demo & website →

✨ Features

• Alphanumeric and numeric keyboards
• Fully customizable UI
  • Colors
  • Text styles
  • Icons
• Multi-language layout support
  • English
  • Italian
  • German
  • French
  • Spanish
  • Portuguese
  • Polish
  • Dutch
  • Czech
  • More to come
• Symbol pages (e.g., punctuation, special characters)
• Custom layout support – define your own key arrangements
• Alternative key support – long-press secondary keys, with optional on-key hints

📦 Installation

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutekeyboard: ^latest_version

or

dependencies:
  ...
  flutekeyboard:
    git:
      url: https://github.com/amarula/flutekeyboard.git
      ref: main

To use the keyboard widget import it:

import 'package:flutekeyboard/flutekeyboard.dart';

To create custom layout import:

import 'package:flutekeyboard/flutekeyboard_keys.dart';

To customize colors and text styles import the theme:

import 'package:flutekeyboard/flutekeyboard_theme.dart';

🚀 Usage

Basic Alphanumeric Keyboard

final theme = FluteKeyboardTheme()
  ..backgroundColor = const Color.fromARGB(255, 209, 211, 215)
  ..btnBackgroundColor = Colors.white
  ..btnSpecialBackgroundColor = const Color.fromARGB(255, 171, 175, 183)
  ..btnTextStyle = const TextStyle(
    color: Colors.black,
    fontSize: 28,
  );

Expanded(
  child: FluteKeyboard(
    width: 800,
    type: FluteKeyboardType.alphanumeric,
    textController: _textController,
    theme: theme,
    shiftIcon: 'assets/shift.png',
    shiftActiveIcon: 'assets/shift_active.png',
    backspaceIcon: 'assets/backspace.png',
    onReturn: () => print(_textController.text),
  ),
),

Custom Alphanumeric Layout

import 'package:flutekeyboard/flutekeyboard_keys.dart';
import 'package:flutekeyboard/flutekeyboard_layout.dart';

const FluteLayout customLayout = FluteLayout(
  code: 'EN',
  displayName: 'English',
  layout: [
    [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '0',
    ],
    [
      'a',
      's',
      'd',
      'f',
      'g',
      'h',
      'j',
      'k',
      'l',
    ],
    [
      IconKeys.shift,
      'z',
      'x',
      'c',
      'v',
      'b',
      'n',
      'm',
      IconKeys.backspace,
    ],
    [
      SpecialKeys.symbol1,
      SpecialKeys.space,
      SpecialKeys.returnK,
    ],
  ],
);

Pass one or more FluteLayouts to alphanumericLayouts. With two or more, a language picker button (icon set via languageIcon) is shown to switch between them at runtime:

FluteKeyboard(
  // ...other parameters
  alphanumericLayouts: const [
    customLayout,
    FluteLayout.it,
  ],
  initialAlphanumericLayout: customLayout,
  languageIcon: 'assets/language.png',
  onAlphanumericLayoutChanged: (layout) => print(layout.displayName),
)

Secondary Key Hints

Keys with long-press alternatives can advertise them with a small hint in the top-right corner of the key face:

FluteKeyboard(
  // ...other parameters
  showSecondaryValues: true,
)

Only the first alternative of a key is shown as a hint, so order the alternatives in your layout with the most relevant character first (e.g. 'eèé' shows è on the e key, while the long-press popup still offers both è and é).

The hint is styled through the theme's btnSecondaryTextStyle. Its fontSize acts as a maximum: the hint is automatically scaled down to fit the key.

Screenshots