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

How to show phone icon when a phone number text is selected? – Flutter

I have a SelectableText Widget with a string which is a phone number

  • Starts with +
  • Has 12 digits

When the text is selected, the option to call it doesn’t appear.
If I open the same text for example in a google search as below, I can see the option to call it. How can I make that in Flutter?

How it should be

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it by looking at the example pointed out by @Luis Utrera

    Solution:

      contextMenuBuilder: (context, EditableTextState editableTextState) {
    return AdaptiveTextSelectionToolbar(
      anchors: editableTextState.contextMenuAnchors,
      children: [
        Padding(
          padding: const EdgeInsets.all(10),
          child: IconButton(
            icon: Icon(Icons.call),
            onPressed: () {
              // TODO: launch call app
            },
          ),
        ),
        ...editableTextState.contextMenuButtonItems
            .map((ContextMenuButtonItem buttonItem) {
              return CupertinoButton(
                borderRadius: null,
                onPressed: buttonItem.onPressed,
                padding: const EdgeInsets.all(10.0),
                pressedOpacity: 0.7,
                child: Text(
                  CupertinoTextSelectionToolbarButton.getButtonLabel(
                    context,
                    buttonItem,
                  ),
                ),
              );
            })
            .toList()
            .cast(),
      ],
    );
  },

  2. 0

    You may use the contextMenuBuilder property for this.
    It will help you creating a different context menu depending on the current state of the user’s selection:
    More info: see contextMenuBuilder property in SelectableText widget doc

    SelectableText(
  'data to show',
  contextMenuBuilder: (_, textState) => Row(
    children: [
      if (isPhoneNumber(textState.textEditingValue.text))
        Container(), //Widget to make the phone call here
    ],
  ),
),

bool isPhoneNumber(String selection) {
  if (!selection.startsWith('+')) return false;
  return RegExp(r'^[0-9]+$').hasMatch(selection.substring(1));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search