Actual combat of flutter - customized keyboard (II)

It took two years flutter, Have some experience , Some cases will be updated from today , Not empty head and brain , Only for practical use , For study or use flutter My little friend's reference , Learning is still shallow , If there is anything wrong, we hope all gods will correct it , So as not to mislead others , Thank you here. ~（ Originality is not easy. , Please indicate the source and author when forwarding ）

Be careful ： No special instructions ,flutter Version is 3.0+

Most of the code content in this article comes from  https://github.com/Im-Kevin/cool_ui, Thank God for giving directions , You can go to the source code if you like , Of course, it is also different from the original author's implementation , Stay tuned .

         In the first article , We introduced how to push up components like a system keyboard , In this article, let's take a look at what operations are done in initialization

After the first step of realizing the numeric keyboard , Then the key point of our next step is how to monitor the input , We know Flutter It is through the native channel to Android and ios The system sends instructions , For example, a value entered by the keyboard is to call "flutter/textinput" Sending input instructions to native .

One . Keyboard initialization

Add an interceptor in initialization , Deal with it in our own way

static init(KeyboardRootState root, BuildContext context) {
_root = root;
_context = context;
interceptorInput();  // Keyboard interception ,
}

static interceptorInput() {
if (isInterceptor) return;
isInterceptor = true;
WidgetsBinding.instance.defaultBinaryMessenger
.setMessageHandler("flutter/textinput", _textInputHanlde); // Use your own processing
}

Here are important concepts BinaryMessenger, This is an abstract class , The official explanation is as follows

/// A messenger which sends binary data across the Flutter platform barrier.

We can cover his setMessageHandler How to deal with , What we realize is keyboard , Then the coverage is ”flutter/textinput” Treatment method .

Two . Key methods cover

1. 'TextInput.show'

TextField Call this method after getting the focus , In this method, we need to open the keyboard

static openKeyboard() {
var keyboardHeight = _currentKeyboard!.getHeight(_context!); // Get configuration height
_keyboardHeightNotifier.value = keyboardHeight;
if (_root!.hasKeyboard && _pageKey != null) return;
_pageKey = GlobalKey<KeyboardPageState>();
var tempKey = _pageKey;
_root!.setKeyboard((ctx) {
if (_currentKeyboard != null && _keyboardHeightNotifier.value != 0) {
&nbsp;&nbsp;&nbsp;&nbsp;return KeyboardPage(
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: tempKey,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;builder: (ctx) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return _currentKeyboard!
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.builder(ctx, _keyboardController!, _keyboardParam);
&nbsp;&nbsp;&nbsp;&nbsp;},height: _keyboardHeightNotifier.value);
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;return Container();
&nbsp;&nbsp;&nbsp;&nbsp;}
});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The logic of opening the keyboard is to add a builder, This builder It's a keyboard page , And set the height , And assign it to _keyboardHeightNotifier, This was mentioned in the last article , Will automatically override viewInsets Value , Add system level masking

2.&nbsp;'TextInput.hide'

Hidden keyboard , call root!.clearKeyboard(), That is to say builder Set to null .

3. 'TextInput.setClient'

stay TextInput.setClient Find the keyboard configuration corresponding to the corresponding keyboard according to the keyboard type defined in the input box , And initial input change monitoring KeyboardController.

At this time, we can customize our type and KeyboardController, Used to respond to our own keyboard events .

The key codes are as follows

_keyboardController = KeyboardController(client: client!)
..addListener(() {
var callbackMethodCall = MethodCall(
"TextInputClient.updateEditingState", [
_keyboardController!.client.connectionId,
_keyboardController!.value.toJSON()
]);
WidgetsBinding.instance.defaultBinaryMessenger
.handlePlatformMessage("flutter/textinput",
_codec.encodeMethodCall(callbackMethodCall), (data) {});
});

3、 ... and .KeyboardController

Control the input of text , And implement a series of buttons

addText(),deleteOne(), For entering and deleting characters , And line breaks , Complete and so on

/// complete
doneAction() {
CoolKeyboard.sendPerformAction(TextInputAction.done);
}

/// next
nextAction() {
CoolKeyboard.sendPerformAction(TextInputAction.next);
}

/// the previous
preAction() {
CoolKeyboard.sendPerformAction(TextInputAction.previous);
}

among sendPerformAction Will call the native channel "TextInputClient.performAction", Used to respond to keyboard non input operations , These operations are defined in text_input.dart in .

static sendPerformAction(TextInputAction action) {

var callbackMethodCall = MethodCall("TextInputClient.performAction",
[_keyboardController!.client.connectionId, action.toString()]);

WidgetsBinding.instance.defaultBinaryMessenger.handlePlatformMessage(
"flutter/textinput",
_codec.encodeMethodCall(callbackMethodCall),
(data) {});
}

Four . Implement keyboard components

This should be the simplest part of the full text , It's also the most basic part , use Row and Column Realize horizontal and vertical buttons

use controller.deleteOne() To achieve deletion

controller.nextAction() Implement line break

use controller.doneAction() Realize deletion

problem ： There is a problem in the implementation , That is, all my buttons are used onTap Implement click event , When continuous clicks occur, characters will be lost

Solution

GestureDetector(

onPanDown: (details) {
controller.addText(value ?? title);
},

onPanDown, Call when touching the screen , Will take precedence onTap perform , For specific explanations, please refer to GestureDetector Source code , Altogether 7 Categories: 25 Kind of .