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.

Catalogue of Flutter tips
【Flutter Tips 01】– TextField text is vertically centered
Configure Flutter environment variables
Common errors are recorded
【Flutter Tips 04】– Design the Flutter architecture
【Flutter tips 05】– Discussion on Flutter hybrid integration scheme
【Flutter Tips 06】– Implementation of Flutter folding heads, frosted-glass effects and message prompts
The life cycle of a Flutter

📃 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.