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.