Flutter's keyboard_actions plugin

original

https://medium.com/flutterdevs/keyboard-actions-in-flutter-ae4781286806

Code

https://github.com/flutter-devs/KeyboardAction

refer to

• https://pub.dev/packages/keyboard_actions

text

Learn how to customize the default keyboard in your Flutter application

Keyboard actions in Flutter

The keyboard provided by Android/IoS has no buttons to hide the keyboard, which brings a lot of inconvenience to users. When our application has many textfields that need to display operation keys on the toolbar and handle functions defined as fields. The keyboard operation is the key that indicates the field operation when the user clicks on the current field.

In this article, I will demonstrate how to use form input with fields to display keyboard actions in an application. We will also implement a demo program and use the package keyboard action to demonstrate these features. I tried to explain my project in a simple way

Introduction:

KEYBOARD_ACTION provides several software packages to make your device keyboard customizable. Today, we discuss KEYBOARD action. There is a well-known problem in iOS, when we use the number input field, it will not show the finish button inside/above the keyboard. Therefore, keyboard operation provides various functions that help overcome the current problems faced by users and developers.

https://pub.dev/packages/keyboard_actions

Features:

• Complete keyboard buttons (you can customize the buttons)
• Move up and down between text fields (settings can be hidden) nextFocus: false ).
• Keyboard bar customization
• Custom footer widget below the keyboard bar
• Create your own keyboard in an easy way
• You can use it on Android, iOS or both platforms
• Compatible with dialogs

Setting up the project:

Step 1: Use the packaging for

keyboard_actions | Flutter Package

Keyboard operation | Flutter Package

Add features to the Android/iOS keyboard in a simple way. Because the keyboard provided by Android/iOS...

pub.dev

https://pub.dev/packages/keyboard_actions

Add the youtube player_iframe plug-in to the dependencies of the pubspec.yaml file, and then run the $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:

Code implementation:

1. Create a new dart file named home_screen.dart . Folder to design the user interface and write the logic you want to implement in the project

2. I built long Forms in the flutter demo project and ran this application on Android. If we are using an IOS device, then it will not display done completed In the iOS system, when we use the numeric input field, in the Android system, the buttons in/above the keyboard will not be displayed

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 operations to the project, you need to wrap all TextFormFields under Widget KeyboardAction. This Widget KeyboardAction needs keyboardactivesconfig configuration to add configuration to the 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. provides a function, when we press anywhere on the device screen except the keyboard, we can close the keyboard. So we need to add this line

tapOutsideBehavior: TapOutsideBehavior.translucentDismiss,

5. We should initialize the FocusNode objects assigned to different text fields. Therefore, developers make customizations because it allows the keyboard to focus on this widget.

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

6. We will define keyboardansconfig. The wrapper is a single configuration keyboard action bar. In keyboardansconfig, we individually define the operations performed by the keyboard for each TextFormField according to your needs. We can customize the keyboard color, the color of the dividing line between the keyboard and the content, and the focus between the display arrow moving forward/backward and the input.

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

7. Now, we will define actions according to different TextFormField requirements.

actions: [
  KeyboardActionsItem(
    focusNode: _nodeText1,
  ),

8. To display the input with a custom footer in the application, you need to implement the following code in your KeyboardActionsItem, where we must 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 a custom dialog box in your application, add this logic to the focus node specified in KeyboardActionsItem.

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 output video of the screen, as shown below, the user can observe the output.

Conclusion:

In this article, I have briefly introduced the basic structure of the KeyboardAction package; you can modify this code according to your choice, or you can use this package according to your needs. This is a small introduction to keyboard customization user interaction from my side, it works using Flutter.

---

© Cat brother

• https://ducafecat.tech/
• https://github.com/ducafecat
• WeChat group ducafecat
• b Station https://space.bilibili.com/404904528

Past

Open source

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

News client

https://github.com/ducafecat/flutter_learn_news

strapi manual translation

https://getstrapi.cn

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578