【Flutter Tips 08】– Switch between the Flutter custom keyboard and the system keyboard

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

📃 Demand is the most effective motivator for learning skills

I: Introduction: Meet the requirements, to achieve a custom keyboard, and the system keyboard switch.

Two: implementation steps. 1, the home page to define group input components and switch buttons 2, custom keyboard 3, interaction 3: detailed implementation. 1, the home page to define the group input components and switch buttons, this simple. Post the complete code directly.

Container( height: 50, color: Colors.white, child: Row( children: [ Expanded( child: PaddingWidget( child: TextFieldWidget(hintText: 'focusNode: focusNode?? Null, editingController: Controller, autoFocus: autoFocus ?? true, showCursor: showCursor ?? true, readOnly: readOnly ?? true, onTap: () { if (onTap != null) { onTap!(); } }, onSubmitted: (value) { if (onSubmitted != null) { onSubmitted!(value); } }, onChanged: (value) { if (onChanged != null) { onChanged!(value); } }, ), left: 15, ), ), Container( color: WMColor.divider, width: GestureDetectorWidget(Child: Container(width: 60, height: 50, alignment: Alignment.center, // color: Colors.red, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [Icon(Icons. Keyboard_sharp, color: color (0xFF6D7380)), TextWidget(' system keyboard ', style: WMTextStyle.setTextStyle(Color(0xFF373E4D), fontSize: 10), ), ], )), clickCallBack: If (switchKeyboardCallBack!= null) {switchKeyboardCallBack!();}},)],);Copy the code

2, custom keyboard: here the first reference to the big guy’s custom key keyboard (later will be transformed into a custom letter keyboard)blog.csdn.net/weixin_3802…

import 'package:flutter/material.dart'; /// <summary> /// todo: // author: ZWB /// dateTime: 2021/7/19 10:25 /// filePath: lib/app/widgets/number_keypan.dart /// desc: /// <summary> OverlayEntry? overlayEntry; numberKeypan({ required Function(OverlayEntry) initialization, required Function(String) onTap, Function? onCommit, Function? onDel, }) { overlayEntry = OverlayEntry(builder: (context) { List<String> list = [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '.' ]; Return Container(Child: AnimatedContainer(Curve: Cubic(0.160, 0.265, 0.125, 0.995), duration: duration (milliseconds: 360), child: Positioned( bottom: 0, child: Material( child: Container( width: MediaQuery.of(context).size.width, alignment: Alignment.center, color: Colors.grey[200], child: Row( children: [ Expanded( child: Wrap( alignment: WrapAlignment.spaceBetween, children: List.generate(list.length, (index) { return Material( color: Colors.white, child: Ink( child: InkWell( child: Container(decoration: BoxDecoration(border: border. All (color: color.grey, width: 0.25),) Alignment.center, height: 50, width: (MediaQuery.of(context).size.width - 60) / 3, child: Text( "${list[index]}", style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold), ), ), onTap: () { if (list[index] != "") { onTap(list[index]); } }, ), color: Colors.white, ), ); }), ), ), Column( children: [SizedBox(width: 60, height: 50 * 1.5, Child: MaterialButton(onPressed: () {if (onDel!= null) {onDel();}}, child: Text(" delete ", style: TextStyle(color: color.black, fontWeight: FontWeight.bold)), color: Colors.grey[100], elevation: 0, padding: EdgeInsets.all(0), ), ), SizedBox( width: 60, height: 50 * 2.5, child: MaterialButton(onPressed: () {// disKeypan(); if (onCommit!= null) {onCommit();}}, child: Text(" enter ", style: TextStyle(color: keypan) Colors.white, fontWeight: FontWeight.bold), ), color: Colors.blue, elevation: 0, padding: EdgeInsets.all(0), ), ), ], ), ], ), ), )), ), ); }); initialization(overlayEntry!) ; } /// <summary> /// todo: keep the cursor at the end /// author: ZWB /// date: 2021/7/19 11:43 /// param: parameter /// return: Void /// <summary> /// lastCursor({required TextEditingController TextEditingController}) {/// keep the cursor at the final length = textEditingController.text.length; textEditingController.selection = TextSelection(baseOffset: length, extentOffset: length); } /// <summary> /// todo: custom keyboard delete event /// author: ZWB /// date: 2021/7/19 11:45 /// param: parameter /// return: void /// <summary> /// delCursor({required TextEditingController textEditingController}) { if (textEditingController ! = null && textEditingController.value.text ! = "") textEditingController.text = textEditingController.text .substring(0, textEditingController.text.length - 1); } /// <summary> /// todo: open keyboard /// author: ZWB /// date: 2021/7/19 12:04 /// param: parameter /// / return: void /// <summary> /// openKeypan({BuildContext? context}) { Overlay.of(context!) ! .insert(overlayEntry!) ; } /// <summary> /// todo: destroy keyboard /// author: ZWB /// date: 2021/7/19 12:03 /// param: parameter /// return: void /// <summary> /// disKeypan() { overlayEntry! .remove(); }Copy the code

3. Interaction

// Set false first, otherwise exceptions will pop up. We use animations to bounce, input components to bounce with the keyboard, or to bounce with a custom keyboard. ResizeToAvoidBottomInset: false, / / core pop-up code. Can be triggered at a certain point whether to press the keyboard as a sign. GetBuilder<CNPrescriptionController>( init: CNPrescriptionController(), builder: (_) { return Container( child: AnimatedContainer(Curve: Cubic(0.160, 0.265, 0.125, 0.995), duration: duration (milliseconds: 360), height: keyBoardType == 1 ? _prescriptionC.medicineSearchList.isEmpty ? 250 : 250 + 60 : _prescriptionC.medicineSearchList.isEmpty ? MediaQuery.of(context).viewInsets.bottom + 50 : MediaQuery.of(context).viewInsets.bottom + 50 + 60, child: Container( // height: keyBoardType == 1 ? 250 : 380, alignment: Alignment.topCenter, child: Column( children: [ _prescriptionC.medicineSearchList.isEmpty ? Container() : CNPrescriptionResultWidget( selectedCallBack: (index) { _prescriptionC .selectedSearchResultHandle( index);  }, ), CNPrescriptionNameInputWidget( controller, switchKeyboardCallBack: () { switchKeyboard(); }, focusNode: _focusNode, // showCursor: true, autoFocus: keyBoardType == 1 ? false : true, readOnly: keyBoardType == 1 ? true : false, onTap: () { // switchKeyboard(); }, onSubmitted: (value) {Utils. Logs (" enter "); _prescriptionC. IsShowInput = false; setState (() {});}, onChanged: (value) { _prescriptionC.search(value); }, ) ], ), ), ), ); },)Copy the code

Four, record dribs and drabs, the later will be better.