Flutter中选中电话号码文本时如何显示电话图标？

直接用SelectableText组件默认不会识别带+号的长号码并提供呼叫选项，要实现这个效果，你可以通过自定义文本选择工具栏来实现，步骤如下：

1. 添加依赖 #

首先在pubspec.yaml中添加url_launcher包，用于处理拨打电话的功能：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.5 # 版本号可根据最新情况调整

2. 自定义带呼叫选项的SelectableText组件 #

创建一个自定义组件，继承StatelessWidget，在其中实现号码校验和自定义工具栏：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

class SelectableTextWithCallOption extends StatelessWidget {
  final String text;
  final TextStyle? style;

  const SelectableTextWithCallOption(this.text, {super.key, this.style});

  // 校验是否为符合格式的号码：+开头，12位数字
  bool _isValidPhoneNumber(String selectedText) {
    return RegExp(r'^\+\d{12}$').hasMatch(selectedText.trim());
  }

  // 执行拨打电话操作
  Future<void> _makePhoneCall(String number) async {
    final Uri callUri = Uri(scheme: 'tel', path: number);
    if (await canLaunchUrl(callUri)) {
      await launchUrl(callUri);
    }
  }

  @override
  Widget build(BuildContext context) {
    return SelectableText(
      text,
      style: style,
      toolbarBuilder: (context, editableTextState) {
        // 获取默认的文本选择工具栏
        final defaultToolbar = SelectableTextToolbar.editableText(
          context: context,
          editableTextState: editableTextState,
        );

        // 获取当前选中的文本内容
        final selectedText = editableTextState.currentTextEditingValue.selection.textInside(text);

        // 如果选中的是有效号码，追加呼叫选项
        if (_isValidPhoneNumber(selectedText)) {
          return SelectableTextToolbar(
            anchor: defaultToolbar.anchor,
            children: [
              ...defaultToolbar.children,
              const Divider(height: 1, thickness: 1),
              TextButton(
                onPressed: () {
                  _makePhoneCall(selectedText);
                  editableTextState.hideToolbar(); // 完成操作后关闭工具栏
                },
                child: const Text('呼叫'),
              ),
            ],
          );
        }

        // 不是有效号码则返回默认工具栏
        return defaultToolbar;
      },
    );
  }
}

3. 权限配置（仅Android） #

在android/app/src/main/AndroidManifest.xml中添加拨打电话权限：

<uses-permission android:name="android.permission.CALL_PHONE" />

4. 使用组件 #

直接在页面中使用自定义的SelectableTextWithCallOption组件即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('号码呼叫示例')),
    body: const Center(
      child: SelectableTextWithCallOption(
        '+123456789012',
        style: TextStyle(fontSize: 18),
      ),
    ),
  );
}

这样当你选中符合格式的号码时，文本选择菜单就会多出一个“呼叫”选项，点击即可触发拨号功能。

内容的提问来源于stack exchange，提问作者Miro