Custom In-App Keyboard in Flutter

A full demo to get you started

The demo keyboard you’ll create

This article will show you how to create a custom keyboard widget used to enter text in a Flutter TextField within your own app. Use cases include text input for special characters or languages where a system keyboard may not exist or users may not have the correct keyboard installed. For example, I’ve used this method with the mongol package to create a basic keyboard to enter traditional Mongolian text:

We’ll make a simpler version today:

Note: This article will not tell you how to build a system keyboard that users install and can use in any app. This is only a widget based approach to use within your own app.

The full code is at the bottom of the article. It’s up to date for Flutter 1.22 and Dart 2.10.

Create key widgets

The nice thing about Flutter is that it’s easy to build complex layouts like keyboards by combining simpler widgets. So to start with, you’ll create a couple…