Shulou(Shulou.com)06/01 Report--

This article will explain in detail how Flutter supports the input box function of the magnifying glass. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Functional requirements

Recently, a Flutter development problem was encountered in requirements development, in order to optimize the user input experience. Product students want to be able to support the magnifying glass function when moving the cursor in the input box. It was thought to be a small requirement, because iOS and Android on native systems have the impression that this feature comes with it. In the implementation of the development only found that this is not the case, Flutter does not seem to support the original function.

Demand survey

In order to confirm whether the input box magnifying glass function is officially supported, it is found that this problem has been mentioned in 18 years after searching issue on the github project, but the official has not supported the implementation.

Since there is no official support, adhering to the idea that I have wheels, I continue to search through github to see if any developers have customized this feature.

Searching for Magnifier found an article about the implementation of a magnifying glass, but it was not implemented on the input box, but only magnified where the screen gestures were touched.

Because can not find the full implementation of the input box magnifying glass function, then have to achieve this function on their own. The magnifying glass function can be realized for the input box according to Magnifier.

Demand realization

Through the use of TextField, you will find that when using the cursor double-click or long press will appear TextToolBar function bar, as the cursor moves, the upper edit bar will also move with the cursor. This finding can be applied to the magnifying glass function: follow the cursor movement + zoom in to achieve the final desired effect.

Source code interpretation

Then before the function is implemented, you need to read the TextField source code to understand how the edit bar above the cursor is implemented and can follow the cursor.

PS: source code parsing uses extended_text_field, mainly due to the use of rich text input and display in the project.

The ExtendedTextField input box component source code finds the view build method in ExtendedEditableText to see CompositedTransformTarget and _ toolbarLayerLink. And these two are already the key information to realize the magnifying glass function.

You can find a lot about the use of CompositedTransformTarget on the Internet to bind two View views. Besides CompositedTransformTarget, there is also CompositedTransformFollower. The simple understanding is that CompositedTransformFollower is the kidnapper, CompositedTransformTarget is the abductee, and the former follows the latter. _ toolbarLayerLink is the binding medium that follows the cursor action bar.

Return CompositedTransformTarget (link: _ toolbarLayerLink, / / operating tool child: Semantics (... Child: _ Editable (key: _ editableKey, startHandleLayerLink: _ startHandleLayerLink, / / left cursor position endHandleLayerLink: _ endHandleLayerLink, / / right cursor position textSpan: _ buildTextSpan (context), value: _ value, cursorColor: _ cursorColor,. ),))

Find another consumer ExtendedTextSelectionOverlay of _ toolbarLayerLink through the source code query.

Void createSelectionOverlay ({/ / create action bar ExtendedRenderEditable? RenderObject, bool showHandles = true,}) {_ selectionOverlay = ExtendedTextSelectionOverlay (clipboardStatus: _ clipboardStatus, context: context, value: _ value, debugRequiredFor: widget, toolbarLayerLink: _ toolbarLayerLink, startHandleLayerLink: _ startHandleLayerLink, endHandleLayerLink: _ endHandleLayerLink, renderObject: renderObject?? RenderEditable, selectionControls: widget.selectionControls,. );.

You can find the use of the CompositedTransformFollower component through the source code query, and you can see from the code that the selectionControlsbuildToolbar is the implementation of the edit bar.

Return Directionality (textDirection: Directionality.of (this.context), child: FadeTransition (opacity: _ toolbarOpacity, child: CompositedTransformFollower (/ / tracking components of the action bar link: toolbarLayerLink, showWhenUnlinked: false, offset:-editingRegion.topLeft, child: Builder (builder: (BuildContext context) {return selectionControlsbuildToolbar (context, editingRegion, renderObject.preferredLineHeight) Midpoint, endpoints, selectionDelegatekeeper, clipboardStatuskeeper, renderObject.lastSecondaryTapDownPosition,) },)

Then go back to find out how selectionControls is implemented. The default creation of textSelectionControls can be found in the build method in _ ExtendedTextFieldState. Because of the differences between Android and iOS platforms, there are two selectionControls, cupertinoTextSelectionControls and materialTextSelectionControls.

Switch (theme.platform) {case TargetPlatform.iOS: final CupertinoThemeData cupertinoTheme = CupertinoTheme.of (context); forcePressEnabled = true; textSelectionControls? = cupertinoTextSelectionControls;. Break;. Case TargetPlatform.android: case TargetPlatform.fuchsia: forcePressEnabled = false; textSelectionControls? materialTextSelectionControls;. Break;....}

Here only look at the MaterialTextSelectionControls source code implementation. The layout is implemented in _ TextSelectionControlsToolbar. _ TextSelectionHandlePainter is the way to draw the cursor style.

@ override Widget build (BuildContext context) {/ / the location of the left and right cursor final TextSelectionPoint startTextSelectionPoint = widget.endpoints [0]; / / it is determined whether there are two cursors final TextSelectionPoint endTextSelectionPoint = widget.endpoints.length > 1? Widget.endpoints [1]: widget.endpoints [0]; final Offset anchorAbove = Offset (widget.globalEditableRegion.left + widget.selectionMidpoint.dx, widget.globalEditableRegion.top + startTextSelectionPoint.point.dy-widget.textLineHeight-_ kToolbarContentDistance,); final Offset anchorBelow = Offset (widget.globalEditableRegion.left + widget.selectionMidpoint.dx, widget.globalEditableRegion.top + endTextSelectionPoint.point.dy + _ kToolbarContentDistanceBelow,); Return TextSelectionToolbar (anchorAbove: anchorAbove, / / left cursor anchorBelow: anchorBelow,// right cursor children: itemDatas.asMap () .entries.map ((MapEntry entry) {return TextSelectionToolbarTextButton (padding: TextSelectionToolbarTextButton.getPadding (entry.key, itemDatas.length), onPressed: entry.value.onPressed, child: Text (entry.value.label),) }). ToList (), / / button function for each editing operation);}} / / Android selected style drawing (default is dot plus an arrow) class _ TextSelectionHandlePainter extends CustomPainter {_ TextSelectionHandlePainter ({required this.color}); final Color color; @ override void paint (Canvas canvas, Size size) {final Paint paint = Paint (). Color = color; final double radius = size.width/2.0 Final Rect circle = Rect.fromCircle (center: Offset (radius, radius), radius: radius); final Rect point = Rect.fromLTWH (0.0,0.0, radius, radius); final Path path = Path ().. addOval (circle).. addRect (point); canvas.drawPath (path, paint);} @ override bool shouldRepaint (_ TextSelectionHandlePainter oldPainter) {return color! = oldPainter.color;}} function reproduction

After understanding the source code function, you can copy the MaterialTextSelectionControls implementation to complete the magnifying glass function. It also inherits TextSelectionControls and implements MaterialMagnifierControls function.

The main modification point is the implementation of _ MagnifierControlsToolbar and the MaterialMagnifier function.

MagnifierControlsToolbar

The build method returns the positioning information of the widget.endpoints cursor, which is used to calculate the offset. Finally, input the two cursor information into the MaterialMagnifier component.

Const double _ kHandleSize = 22.0 th Const double _ kToolbarContentDistanceBelow = _ kHandleSize-2.0 x Const double _ kToolbarContentDistance = 8.0 X class MaterialMagnifierControls extends TextSelectionControls {@ override Size getHandleSize (double textLineHeight) = > const Size (_ kHandleSize, _ kHandleSize); @ override Widget buildToolbar (BuildContext context, Rect globalEditableRegion, double textLineHeight, Offset selectionMidpoint, List endpoints, TextSelectionDelegate delegate, ClipboardStatusNotifier clipboardStatus, Offset? LastSecondaryTapDownPosition,) {return _ MagnifierControlsToolbar (globalEditableRegion: globalEditableRegion, textLineHeight: textLineHeight, selectionMidpoint: selectionMidpoint, endpoints: endpoints, delegate: delegate, clipboardStatus: clipboardStatus,);} @ override Widget buildHandle (BuildContext context, TextSelectionHandleType type, double textHeight, [VoidCallback? OnTap, double? StartGlyphHeight, double? EndGlyphHeight]) {return const SizedBox ();} @ override Offset getHandleAnchor (TextSelectionHandleType type, double textLineHeight, [double? StartGlyphHeight, double? EndGlyphHeight]) {switch (type) {case TextSelectionHandleType.left: return const Offset (_ kHandleSize, 0); case TextSelectionHandleType.right: return Offset.zero; default: return const Offset (_ kHandleSize / 2,-4);} class _ MagnifierControlsToolbar extends StatefulWidget {const _ MagnifierControlsToolbar ({Key? Key, required this.clipboardStatus, required this.delegate, required this.endpoints, required this.globalEditableRegion, required this.selectionMidpoint, required this.textLineHeight,}): super (key: key); final ClipboardStatusNotifier clipboardStatus; final TextSelectionDelegate delegate; final List endpoints; final Rect globalEditableRegion; final Offset selectionMidpoint; final double textLineHeight; @ override _ MagnifierControlsToolbarState createState () = > _ MagnifierControlsToolbarState ();} class _ MagnifierControlsToolbarState extends State with TickerProviderStateMixin {Offset offset1 = Offset.zero; Offset offset2 = Offset.zero Void _ onChangedClipboardStatus () {setState (() {});} @ override void initState () {super.initState (); widget.clipboardStatus.addListener (_ onChangedClipboardStatus); widget.clipboardStatus.update ();} @ override void didUpdateWidget (_ MagnifierControlsToolbar oldWidget) {super.didUpdateWidget (oldWidget); if (widget.clipboardStatus! = oldWidget.clipboardStatus) {widget.clipboardStatus.addListener (_ onChangedClipboardStatus); oldWidget.clipboardStatus.removeListener (_ onChangedClipboardStatus) } widget.clipboardStatus.update ();} @ override void dispose () {super.dispose (); if (! widget.clipboardStatus.disposed) {widget.clipboardStatus.removeListener (_ onChangedClipboardStatus);}} @ override Widget build (BuildContext context) {TextSelectionPoint point = widget.endpoints [0]; if (widget.endpoints.length > 1) {if (offset1! = widget.endpoints [0] .point) {point = widget.endpoints [0] Offset1 = point.point;} if (offset2! = widget.endpoints [1] .point) {point = widget.endpoints [1]; offset2 = point.point;} final TextSelectionPoint startTextSelectionPoint = point Final Offset anchorAbove = Offset (widget.globalEditableRegion.left + startTextSelectionPoint.point.dx, widget.globalEditableRegion.top + startTextSelectionPoint.point.dy-widget.textLineHeight-_ kToolbarContentDistance,); final Offset anchorBelow = Offset (widget.globalEditableRegion.left + startTextSelectionPoint.point.dx, widget.globalEditableRegion.top + startTextSelectionPoint.point.dy + _ kToolbarContentDistanceBelow,) Return MaterialMagnifier (anchorAbove: anchorAbove, anchorBelow: anchorBelow, textLineHeight: widget.textLineHeight,);}} final TextSelectionControls materialMagnifierControls = MaterialMagnifierControls ()

MaterialMagnifier

MaterialMagnifier is a reference to the implementation of Widget Magnifier magnifying glass. Here is the introduction of some Android layout parameters to achieve, iOS is another customized layout parameters can refer to the Flutter official source code to customize iOS layout.

The realization method of magnifying glass is mainly realized by BackdropFilter and ImageFilter, and the magnifying function is completed by scale and translate operation according to Matrix4.

Const double _ kToolbarScreenPadding = 8.0 _ Const double _ kToolbarHeight = 44.0 _ MaterialMagnifier extends StatelessWidget {const MaterialMagnifier ({Key?) Key, required this.anchorAbove, required this.anchorBelow, required this.textLineHeight, this.size = const Size (90,50), this.scale = 1.7,}): super (key: key); final Offset anchorAbove; final Offset anchorBelow; final Size size; final double scale; final double textLineHeight; @ override Widget build (BuildContext context) {final double paddingAbove = MediaQuery.of (context). Padding.top + _ kToolbarScreenPadding; final double availableHeight = anchorAbove.dy-paddingAbove Final bool fitsAbove = _ kToolbarHeight

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.