Cupertino text selection menu customization #73578

justinmc · 2021-01-08T18:30:43Z

It's now possible to customize the buttons and the appearance of our iOS text selection menu.

This follows my previous work to do the same thing for Material. The API is as identical as possible.

The API for creating custom menus is still not ideal, though, because I limited these two PRs to non-breaking changes for now. In the long term, I'd like to refactor TextSelectionControls (tracked in #73574).

I've created a separate example repo with full examples of how to create custom menus in the meantime.

New public classes

CupertinoTextSelectionToolbar

A fully-featured iOS-style toolbar, including overflow handling and positioning. Since you still must use TextSelectionControls to render this for text selection, there is a bit of extra work to do to get the numbers right (see #73574).

CupertinoTextSelectionToolbarButton

A simple wrapper around CupertinoButton to look exactly like the default iOS text selection toolbar button.

TextSelectionToolbarLayoutDelegate

Positions the toolbar at an anchor, while keeping the menu on the screen. This was abstracted from the Cupertino and Material versions of this and used by both.

Related issues

Closes #36985
Closes #31412
Closes #24407

Tests

Tested positioning with TextSelectionToolbarLayoutDelegate.
Tested positioning with CupertinoTextSelectionToolbar.
Tested overflow with CupertinoTextSelectionToolbar.
Tested creating a custom CupertinoTextSelectionToolbar.
Tested CupertinoTextSelectionToolbarButton opacity behavior and onPressed.

Breaking change

Not a breaking change, just exposes new API.

Screen.Recording.2021-01-07.at.1.52.01.PM.mov

…rial analog

…n both toolbars

skia-gold · 2021-01-08T18:38:02Z

Gold has detected about 3 untriaged digest(s) on patchset 19.
View them at https://flutter-gold.skia.org/cl/github/73578

justinmc · 2021-01-08T18:49:58Z

packages/flutter/lib/src/widgets/text_selection_toolbar_layout_delegate.dart

@@ -0,0 +1,86 @@
+import 'dart:math' as math;


Is widgets the right place for this class? I could also package this as a widget or something.

justinmc · 2021-01-08T18:51:15Z

packages/flutter/lib/src/material/text_selection_toolbar.dart

@@ -117,66 +131,6 @@ class TextSelectionToolbar extends StatelessWidget {
  }
 }

-// Positions the toolbar at the given anchor, ensuring that it remains on
-// screen.
-class _TextSelectionToolbarLayoutDelegate extends SingleChildLayoutDelegate {


This has been moved to its own file and made public to be shared here and with CupertinoTextSelectionToolbar. See packages/flutter/lib/src/widgets/text_selection_toolbar_layout_delegate.dart.

justinmc · 2021-01-08T18:51:46Z

packages/flutter/lib/src/material/text_selection_toolbar.dart

-    final double paddingTop = MediaQuery.of(context).padding.top
+    final double paddingAbove = MediaQuery.of(context).padding.top
        + _kToolbarScreenPadding;
-    final double availableHeight = anchorAbove.dy - paddingTop;
+    final double availableHeight = anchorAbove.dy - paddingAbove;
    final bool fitsAbove = _kToolbarHeight <= availableHeight;
-    final Offset anchor = fitsAbove ? anchorAbove : anchorBelow;
-    final Offset localAnchor = Offset(
-      anchor.dx - _kToolbarScreenPadding,
-      anchor.dy - paddingTop,
-    );
+    final Offset localAdjustment = Offset(_kToolbarScreenPadding, paddingAbove);


Trying to make things look the same as in the Cupertino version.

justinmc · 2021-01-08T18:55:39Z

packages/flutter/lib/src/cupertino/text_selection.dart

-    return _CupertinoTextSelectionToolbarWrapper(
-      arrowTipX: arrowTipX,
-      barTopY: localBarTopY + globalEditableRegion.top,
+    return _CupertinoTextSelectionControlsToolbar(


I moved all of the deleted math above into this class here to be consistent with Material. I'd like to refactor this in the long term (see #73574), but for now the idea is to encapsulate the complexity and keep the public APIs nice and clean.

justinmc · 2021-01-08T18:56:25Z

packages/flutter/lib/src/cupertino/text_selection.dart

@@ -570,694 +313,5 @@ class _CupertinoTextSelectionControls extends TextSelectionControls {
  }
 }

-// Renders the content of the selection menu and maintains the page state.


All of the deleted code here and below was moved to packages/flutter/lib/src/cupertino/text_selection_toolbar.dart and sometimes refactored.

justinmc · 2021-01-08T18:57:54Z

packages/flutter/lib/src/cupertino/text_selection_toolbar.dart

+        _kToolbarScreenPadding,
+      ),
+      child: CustomSingleChildLayout(
+        delegate: TextSelectionToolbarLayoutDelegate(


This logic is now shared with Material via TextSelectionToolbarLayoutDelegate. I deleted the duplicate logic that did this for Cupertino.

skia-gold · 2021-01-08T18:59:02Z

Gold has detected about 3 untriaged digest(s) on patchset 21.
View them at https://flutter-gold.skia.org/cl/github/73578

justinmc · 2021-01-08T18:59:15Z

packages/flutter/lib/src/cupertino/text_selection_toolbar.dart

+// toolbar, with rounded corners and an arrow pointing at the anchor.
+//
+// The anchor should be in global coordinates.
+class _CupertinoTextSelectionToolbarShape extends SingleChildRenderObjectWidget {


Most of the rest of the code in this file was copied over from cupertino/text_selection.dart with a little refactoring. This class in particular was separated out from the positioning logic.

skia-gold · 2021-01-08T19:08:02Z

Gold has detected about 3 untriaged digest(s) on patchset 23.
View them at https://flutter-gold.skia.org/cl/github/73578

skia-gold · 2021-01-08T19:20:03Z

Gold has detected about 6 untriaged digest(s) on patchset 24.
View them at https://flutter-gold.skia.org/cl/github/73578

…ll when no children

…r be needed

LongCatIsLooong

LGTM but just to make sure I understand this correctly:

To add custom buttons one must create a new TextSelectionControls whose buiildToolbar returns a custom CupertinoTextSelectionToolbar with custom children? Is there an easy way to just add a new selection menu item, in addition to whatever control buttons (cut/copy/paste etc.) the system provides?

LongCatIsLooong · 2021-01-12T19:31:56Z

packages/flutter/lib/src/cupertino/text_selection_toolbar.dart

+    }
+    _anchor = value;
+    markNeedsLayout();
+    markNeedsSemanticsUpdate();


nit: I think we can get rid of both markNeedsSemanticsUpdates.

LongCatIsLooong · 2021-01-12T20:22:31Z

packages/flutter/lib/src/cupertino/text_selection_toolbar_button.dart

+  final Widget child;
+
+  /// Called when this button is pressed.
+  final VoidCallback? onPressed;


should we may this non-nullable? If a menu item is not available shouldn't we take it off from the menu?

This is used for the "next" button when on the final page of a menu that overflows. Here's a terrible screenshot of a custom menu that has it, but it also exists in the native-looking menu:

LongCatIsLooong · 2021-01-12T20:23:48Z

packages/flutter/lib/src/cupertino/text_selection_toolbar_button.dart

+  ///
+  /// Pass the resulting widget into the [child] parameter when using a
+  /// CupertinoTextSelectionToolbarButton in a CupertinoTextSelectionToolbar.
+  static Text getText(String string, [bool enabled = true]) {


nit: getText sounds like we're retrieving something that has already been created. Maybe turn this into a named constructor.

Thanks, that was a great suggestion. The code is a lot simpler and users can still easily create text buttons or other things like icon buttons.

justinmc · 2021-01-12T22:30:09Z

@LongCatIsLooong That's right, it's still overly complicated to make simple changes to the text selection toolbar even with this PR (and same for Material). Here I've attempted to hit the major wins without making any breaking changes. Long term I'd like to also refactor TextSelectionControls, maybe even get rid of it altogether. I'm tracking this in #73574.

RAHEYO · 2021-05-04T23:38:58Z

It shows:

Missing concrete implementations of 'TextSelectionControls.buildHandle', 'TextSelectionControls.getHandleAnchor', and 'TextSelectionControls.getHandleSize'.
Try implementing the missing methods, or make the class abstract.dart(non_abstract_class_inherits_abstract_member)

When using it...

justinmc · 2021-06-23T18:21:59Z

@RAHEYO I just tried my example of customizing the Cupertino menu on Flutter's master branch and it works for me: https://github.com/justinmc/flutter-text-selection-menu-examples/blob/master/lib/custom_cupertino_menu_page.dart

Can you try that and let me know if it still doesn't work?

justinmc added 19 commits December 14, 2020 15:23

Initial split out

3c770ca

CupertinoTextSelectionToolbar widget split out with related stuff

1a61dc0

Merge branch 'master' into cupertino-text-selection-menu-customization

1cedeb6

Abstracted CupertinoTextSelectionToolbarButton

f2af202

Anchor parameter, similar to Material

3162dd6

_CupertinoTextSelectionToolbarWrapper reorganized similar to its Mate…

78eadd6

…rial analog

isArrowPointingDown => isAbove to match Material naming

54dfe40

Use anchorabove/below to match Material and calculate isAbove

2970817

The buttons no longer depend on isAbove

b6dce12

Share docs between material and cupertino

41117de

Position and clipping are separate

797fb8f

Fix arrow x position

c68b5ec

CupertinoToolbarBuilder

e44da03

Correct arrow direction

f7b3f9c

Make _TextSelectionToolbarLayoutDelegate public and use it to positio…

e481cfd

…n both toolbars

Use a Padding widget instead of calculating padding

0d3e656

Standardized renderbox name

7e21ef4

Test the overall menu

c007cbd

Test TextSelectionToolbarLayoutDelegate

5b9e5ee

flutter-dashboard bot added f: cupertino flutter/packages/flutter/cupertino repository f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 8, 2021

google-cla bot added the cla: yes label Jan 8, 2021

justinmc mentioned this pull request Jan 8, 2021

Proposal: Simple custom text selection toolbars #73574

Closed

justinmc added 2 commits January 8, 2021 10:46

Test CupertinoTextSelectionToolbarButton

ba13130

Analyzer fix

adf0464

justinmc commented Jan 8, 2021

View reviewed changes

justinmc added 2 commits January 8, 2021 10:59

Remove a TODO that was done

2ac761f

Added missing headers

a8a11aa

justinmc marked this pull request as ready for review January 8, 2021 19:01

justinmc requested a review from LongCatIsLooong January 8, 2021 19:01

Fix recursive import

7b011cc

justinmc added 5 commits January 8, 2021 14:58

If not children, dont build the menu. Fixes tests and same as Material.

4e6aad1

Fix a bug (existing?) where the invisible buttons were tappable

9cbc5e3

Double application of screen padding was causing test to fail

74f2195

Update test now that CupertinoTextSelectionToolbar doesnt render at a…

d760446

…ll when no children

Analyzer fix

6856e88

justinmc mentioned this pull request Jan 11, 2021

[proposal] Allow changing the textStyle of TextField's menu #58512

Closed

justinmc self-assigned this Jan 11, 2021

[fixing tests] Dont try to draw the toolbar on web where it will neve…

1ee5cb1

…r be needed

LongCatIsLooong reviewed Jan 12, 2021

View reviewed changes

Code review feedback, named constructor instead of getText

1a149ce

LongCatIsLooong approved these changes Jan 12, 2021

View reviewed changes

justinmc merged commit d9f3d2e into flutter:master Jan 13, 2021

justinmc deleted the cupertino-text-selection-menu-customization branch January 13, 2021 19:14

justinmc added the a: text input Entering text in a text field or keyboard related problems label Feb 23, 2021

Cupertino text selection menu customization #73578

Cupertino text selection menu customization #73578

Uh oh!

Conversation

justinmc commented Jan 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New public classes

CupertinoTextSelectionToolbar

CupertinoTextSelectionToolbarButton

TextSelectionToolbarLayoutDelegate

Related issues

Tests

Breaking change

Uh oh!

skia-gold commented Jan 8, 2021

Uh oh!

justinmc Jan 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skia-gold commented Jan 8, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skia-gold commented Jan 8, 2021

Uh oh!

skia-gold commented Jan 8, 2021

Uh oh!

LongCatIsLooong left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justinmc commented Jan 12, 2021

Uh oh!

RAHEYO commented May 4, 2021

Uh oh!

justinmc commented Jun 23, 2021

Uh oh!

Uh oh!

justinmc commented Jan 8, 2021 •

edited

Loading

justinmc Jan 8, 2021 •

edited

Loading