Flutterexperts

The Keyboard that Android/IoS offers does not bring the button to hide the keyboard so this causes lots of inconvenience to users. When our application has many TextFields that are required to display the action key on the toolbar and handle the functions which are defined to fields. Keyboard action is the key that indicates the action of the current field when the users tap into it.

In this post, I will demonstrate how to show keyboard actions in an application with the form input that contains the fields. We will also implement a demo program and use the package keyboard_actions to demonstrate the features. I have tried to explain my project in an easy way

---

Table Of Contents::

Introduction

Setting up Project

Code Implementation

Conclusion

GitHub Link

---

Introduction:

Flutter provides several packages to make your device keyboard customizable. Today, we are discussing KEYBOARD_ACTION. There is a long-known issue in iOS that it does not show the done button inside/above the keyboard in iOS when we use number input fields. So, Keyboard Action provides various features that are helpful to overcome issues that users and developer-facing nowadays.

Features:

• Done button for the keyboard (You can customize the button).
• Move up/down between your Textfields (You can hide for set nextFocus: false).
• Keyboard Bar customization.
• Custom footer widget below keyboard bar
• Create your own Keyboard in an easy way
• You can use it for Android, iOS, or both platforms.
• Compatible with Dialog.

Setting up Project:

Step 1: Package Used

keyboard_actions | Flutter Package
Add features to the Android / iOS keyboard in a simple way. Because of the keyboard that Android / iOS offers us…pub.dev

Add youtube_player_iframe plugin in the dependencies in pubspec.yaml file. Then run $ flutter pub get command.

dependencies:
keyboard_actions: ^3.4.4

Step 2: Import the package as

import 'package:keyboard_actions/keyboard_actions.dart';

Code Implementation:

1. Create a new dart file called home_screen.dart inside the lib folder to design the user interface and write the logic you want to implement in your project.
2. I built long Forms in my flutter demo project and ran that app on Android. If we are on an IOS device then it does not show the done button inside/above the keyboard in iOS when we use number input fields and on Android, it does not show

Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 8.0,
child: Container(
padding: EdgeInsets.only(left: 12),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Custom Footer'),
controller: _customController,
focusNode: _nodeText6,
keyboardType: TextInputType.number,
),
TextFormField(
decoration: InputDecoration(labelText: 'Input Number'),
focusNode: _nodeText1,
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next
),
TextFormField(
decoration: InputDecoration(
labelText: 'Custom cross Button'),
focusNode: _nodeText2,
keyboardType: TextInputType.text,
),
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Custom Action'),
focusNode: _nodeText3,
keyboardType: TextInputType.number,
),
TextFormField(
decoration: InputDecoration(
labelText: 'Input Text without Done button'),
focusNode: _nodeText4,
keyboardType: TextInputType.text,
),
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Toolbar Buttons'),
focusNode: _nodeText5,
keyboardType: TextInputType.number,
),
],
),
),
),
),
);

3. Now, to add Keyboard action in the project you need to wrap all TextFormField under the Widget KeyboardAction that required KeyboardActionsConfig config to add the configuration on your keyboard.

return KeyboardActions(
tapOutsideBehavior: TapOutsideBehavior.translucentDismiss,
//autoScroll: true,
config: _buildConfig(context),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 8.0,
child: Container(
padding: EdgeInsets.only(left: 12),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Custom Footer'),
controller: _customController,
focusNode: _nodeText6,
keyboardType: TextInputType.number,
),

4. KeyboardAction provides a feature to dismiss the keyboard when we press anywhere outside the keyboard on your device screen. So, we need to add this line

tapOutsideBehavior: TapOutsideBehavior.translucentDismiss,

5. We should initialize the FocusNode object which is assigned to a different textformfield. So, developers do customization because it allows the keyboard focus to on this widget.

fnal FocusNode _nodeText1 = FocusNode();//Add In TextFormField TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Toolbar Buttons'),
focusNode: _nodeText1,
keyboardType: TextInputType.number,
)

6. We will define the KeyboardActionsConfig. Wrapper for a single configuration of the keyboard actions bar. Inside the KeyboardActionsConfig we define the actions which was performed by the keyboard independently for each TextFormField on basis of your requirement. We can customize the keyboard color, Color of the line separator between keyboard and content, display arrows prev/next to move focus between inputs.

KeyboardActionsConfig _buildConfig(BuildContext context) {
return KeyboardActionsConfig(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
keyboardBarColor: Colors.grey[200],
keyboardSeparatorColor: Colors.redAccent,
nextFocus: true,
actions: [

7. Now, we will define action according to our requirements in different TextFormField.

actions: [
KeyboardActionsItem(
focusNode: _nodeText1,
),

8. To show input with a custom footer in your application you need to implement the below code in your KeyboardActionsItem where we have to pass the TextController in the Text widget.

KeyboardActionsItem(
focusNode: _nodeText6,
footerBuilder: (_) => PreferredSize(
child: SizedBox(
height: 40,
child: Center(
child: Text(_customController.text),
)),
preferredSize: Size.fromHeight(40)),
),

9. To display the show custom dialogue in your app add this logic inside the KeyboardActionsItem to the specified focus node.

KeyboardActionsItem(
focusNode: _nodeText3,
onTapAction: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text("Show Custom Action"),
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () => Navigator.of(context).pop(),
)
],
);
});
},
),

---

When we run the application, we get the screen’s output video like this where user can observe the output.

Conclusion:

In the article, I have explained the KeyboardAction package basic structure in a flutter; you can modify this code according to your choice and also use the package according to your requirement. This was a small introduction to keyboard customization On User Interaction from my side, and it’s working using Flutter.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

GitHub Link:

find the source code of the Keyboard_Action:

GitHub – flutter-devs/KeyboardAction: Add customization in keyboard
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---