built_in_keyboard

A flutter package to add built-in keyboard instead of system keyboards. This implementation relies on a textInputField and interacts with it through a TextEditingController.

Usage

First of all, add the package to your dependencies and run flutter pub get.

dependencies:
  built_in_keyboard:
    git:
      url: https://github.com/Open-pi/builtinkeyboard.git
      ref: main

With the BuiltInKeyboard widget, you can easily change the layout of the keyboard, the look and feel of the keys, etc.

Here are some attributes that you could change. keep in mind that the controller is required to make the keyboard work correctly.

BuiltInKeyboard(
  controller: this.textController, // required
  language: Language.DE, // optional
  layout: Layout.QWERTZ, // optional, BUT MUST be checked if you modify the language!
  enableSpaceBar: true, // optional, add a spacebar
  enableBackSpace: true, // optional, add a backspace button
  enableCapsLock: true, // optional, add a Caps Lock button
  borderRadius: BorderRadius.circular(8.0), // changes the border radius of the keys
  letterStyle: TextStyle(fontSize: 25, color: Colors.black) // styles the text inside the keys
)

Additional options and flags

OptionRequiredBy defaultDescription
controlleryes-TextEditingController
languagenoLanguage.ENthe language of the keyboard
layoutnoLayout.QWERTYthe layout of the keyboard
heightno-height of keys
widthno-width of keys
spacingno8.0the spacing between each row
borderRadiusno-the radius of the keys
letterStylenofontSize: 25, color: blackTextStyle of the letters
colornodeepOrangecolor of the keys (keyboard color)
enableSpacebarnofalseadds a spacebar
enableBackSpacenotrueadds a backspace button
enableCapsLocknofalseadds a Caps Lock button
enableAllUppercasenofalsemakes the keyboard uppercase
enableLongPressUppercasenofalsewrites an uppercase when long pressing on the keys
highlightColorno-color when pressed
splashColorno-color when pressed (material style)

Contribution

Languages

To add a new language or a keyboad layout to the package you only need to modify the language.dart file. The following steps will show you how to do that.

  1. Add the short name form of your new language to the Language enum.
enum Language {
  EN,
  FR,
  DE,
  <your language>,
}
  1. Add your layout name to the Layout enum if not present.
enum Layout {
  QWERTY,
  QWERTZ,
  AZERTY,
  <your layout>,
}
  1. Create a new map variable called <language name>Config. The keys of this map will be the layouts from the Layout enum (e.g: Layout.QWERTY), and the values will be maps with types <String, String> that contain the core configuration. These latter maps must contain four fields o:

    1. layout: The full text layout of the keyboard.
    2. horizontalSpacing: A floating number which will represent the spaceing between each key.
    3. topLength: The lenght of the top/first row of keys. In other words, the number of keys to display in the top row.
    4. middleLength: The number of keys in the middle row.

    (The bottom/last row will just take the remaining keys).

    example:

     var frenchConfig = {
       Layout.QWERTY: <String, String>{
         'layout': 'qwertyuiopasdfghjklzxcvbnm',
         'horizontalSpacing': '6.0', // space between keys
         'topLength': '10', // number of keys
         'middleLength': '9', // number of keys
       },
       Layout.AZERTY: <String, String>{
         'layout': 'azertyuiopqsdfghjklmwxcvbn',
         'horizontalSpacing': '6.0', // space between keys
         'topLength': '10', // number of keys
         'middleLength': '9', // number of keys
       },
     };
    
  2. And finally your new language config map to the languageConfig map, with the key as the short language name from the Language enum.

var languageConfig = {
  Language.EN: englishConfig,
  Language.FR: frenchConfig,
  Language.DE: germanConfig,
  Language.<short language name>: <language name>Config,
};

Feel free to also modify or add new things to existing languges.

Libraries

built_in_keyboard
language