In this post, I will show you how to use buitinkeyboard in flutter as well as some tips, tricks, and history about how this plugin came to life.
When my friend and I started working on our first app (spellingwizard), we wanted to have a built-in keyboard in our flutter interface, as we found that the system keyboard would not align with our vision of the UI/UX of the app. Furthermore, we would have to deal with issues such as overflow. In our quest for a built-in keyboard, we were disappointed to find that there was no good plugin.
Here comes builtinkeyboard:
In the spirit of open source, we set out to make our own for the community (and for us of course). We wanted this plugin to be as customizable as possible.
To keep things simple, we made the `BuiltInKeyboard` class interact with aTextEditingController. As such, connecting your inboard keyboard is as simple as passing the textEditingController to the class. Although the plugin only supports QWERTY and AZERTY, it’s very easy to add one.
BuiltInKeyboard(
controller: this.textController, // required
layoutType: 'EN', // Only QWERTY and AZERTY are available
enableUppercaseAll: true, // makes the keys uppercase
borderRadius: BorderRadius.circular(8.0), // changes the border radius of the key
letterStyle: TextStyle(fontSize: 25, color: Colors.black) // styles the text inside a key
)Customization:
In terms of modification, we add the ability to:
- change the height of the keys
- change the width of the keys
- spacing between each row
- color of the keys (could be made a gradient with a workaround)
- The font, size and style or the letters
- Add a Space-bar, Backspace or, a CapsLock
You can also change the behaviour of the keys. For instance, you could make the keyboard press uppercase letter when it is long pressed.
Many other setting can be found on github.com.
How to add a gradient
The trick to have a gradient on your keyboard is to make the keys transparent and the background to any gradient you choose. 😃
BuiltInKeyboard(
layoutType: ‘EN’,
enableAllUppercase: true,
color: Colors.transparent,
borderRadius: BorderRadius.circular(8.0),
letterStyle: TextStyle( fontSize: 25, color: appTheme.currentTheme.primaryTextColor, fontWeight:FontWeight.w600),
.....................
.....................),
