Question 75444 in Flutter Question posted in
The official Flutter documentation can be found here.

Text Selection Controls deprecated, user contextMenuBuilder instead – Flutter

I have implemented a custom text selection control to add an open maps button next to the default copy/paste/selectAll on the highlighted text like so:

class MapTextSelectionControls extends MaterialTextSelectionControls {
  // Padding between the toolbar and the anchor.
  static const double _toolbarContentDistanceBelow = 20.0;
  static const double _toolbarContentDistance = 8.0;

  MapTextSelectionControls();

  @override
  Widget buildToolbar(
      BuildContext context,
      Rect globalEditableRegion,
      double textLineHeight,
      Offset selectionMidpoint,
      List<TextSelectionPoint> endpoints,
      TextSelectionDelegate delegate,
      ClipboardStatusNotifier? clipboardStatus,
      Offset? lastSecondaryTapDownPosition,
      ) {
    //.. some code here

    return MapSelectionToolbar(
      anchorAbove: anchorAbove,
      anchorBelow: anchorBelow,
      clipboardStatus: clipboardStatus,
      handleCopy: canCopy(delegate)
          ? () => handleCopy(delegate, clipboardStatus)
          : null,
      handleMap: selectedText.isNotEmpty
          ? () {
        openLink(generateLocationLinkFromQuery(selectedText));
        delegate.hideToolbar();
      }
          : null,
      handleCut: canCut(delegate) ? () => handleCut(delegate) : null,
      handlePaste: canPaste(delegate) ? () => handlePaste(delegate) : null,
      handleSelectAll:
      canSelectAll(delegate) ? () => handleSelectAll(delegate) : null,
    );
  }
}

class MapSelectionToolbar extends StatefulWidget { ....

SelectableRegion(
        selectionControls: MapTextSelectionControls(),
        focusNode: _selectableRegionFocusNode, ....)

enter image description here

However Flutter is warning that the way I have it implemented right now is about to be deprecated but I could not figure out or find sufficient resources on how the new way of achieving the same result would be.

enter image description here

Tags:

2

Answers


  1. 0

    These are just warnings from Flutter, nonetheless these changes happened for a reason, and the package/plugin/library requests you to replace the parameter names with the new ones. Considering there are no type changes of the parameters, you’ll only need to replace the names of the parameters.

    Login or Signup to reply.
  2. 0

    Flutter 3.7 has a new way to implement context menus.
    Here are the details and examples: A new way to customize context menus
    You can do something like this:

    SelectableText(
  "Lorem ipsum dolor sit amet",
  contextMenuBuilder: (context, editableTextState) {
    final TextEditingValue value = editableTextState.textEditingValue;
    final List<ContextMenuButtonItem> buttonItems = editableTextState.contextMenuButtonItems;
    buttonItems.insert(
      0,
      ContextMenuButtonItem(
        label: 'Send email',
        onPressed: () {
          // your "send email" code    
        },
      ),
    );
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: buttonItems,
    );
  },
)

    Another example with SelectionArea and editable text spans:

    SelectionArea(
        onSelectionChanged: (value) {
          selectedText = value?.plainText ?? "";
        },
        contextMenuBuilder: (context, editableTextState) {
          final List<ContextMenuButtonItem> buttonItems = editableTextState.contextMenuButtonItems;
          buttonItems.insert(
            0,
            ContextMenuButtonItem(
              label: 'Send email',
              onPressed: () {
                debugPrint("send "$selectedText" by email");
                // your "send email" code
              },
            ),
          );
          return AdaptiveTextSelectionToolbar.buttonItems(
            anchors: editableTextState.contextMenuAnchors,
            buttonItems: buttonItems,
          );
        },
        child: Scaffold(
          appBar: AppBar(title: const Text(_title)),
          body: const Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Lorem ipsum dolor sit amet, ',
                ),
                SizedBox(height: 10),
                Text.rich(
                  TextSpan(
                    text: "consetetur sadipscing elitr",
                  ),
                ),
              ],
            ),
          ),
        ),
      )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search