Flutter中无法为SelectableRegion/SelectionArea添加文本选择菜单按钮

问题 #

需要在非表单输入类的Text Widget中，长按选中文本后弹出的选择菜单里添加自定义按钮以执行特定操作。尝试使用SelectableRegion组件及相关方案，代码无语法错误，但自定义按钮始终无法显示。

解决方案 #

问题源于上下文菜单的构建逻辑与状态依赖问题，以下是修正后的代码及关键说明：

修正后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Selection Area'),
      ),
      body: Center(
        child: SelectionArea(
          onSelectionChanged: (value) {
            // 可选：监听选中内容变化，无需保存状态
            print('当前选中文本：${value?.plainText}');
          },
          contextMenuBuilder: (context, selectableRegionState) {
            // 构建自定义按钮
            final extraButton = ContextMenuButtonItem(
              label: '自定义按钮',
              onPressed: () {
                // 先关闭上下文菜单
                selectableRegionState.hideContextMenu();
                // 直接从选择状态获取文本，无需依赖外部状态
                final selectedText = selectableRegionState.currentSelection?.plainText;
                if (selectedText != null) {
                  // 执行你的自定义操作
                  print('触发自定义操作，选中内容：$selectedText');
                }
              },
            );

            // 组合自定义按钮与默认按钮
            final buttonItems = [
              extraButton,
              ...selectableRegionState.contextMenuButtonItems,
            ];

            return AdaptiveTextSelectionToolbar.buttonItems(
              buttonItems: buttonItems,
              anchors: selectableRegionState.contextMenuAnchors,
            );
          },
          child: const Text('!!! 选中我的一部分试试 !!!'),
        ),
      ),
    );
  }
}

关键修改点 #

• 移除冗余状态变量：不再通过setState保存选中文本，直接从selectableRegionState.currentSelection获取内容，避免状态不同步问题。
• 完善按钮交互逻辑：在自定义按钮的点击事件中，先调用selectableRegionState.hideContextMenu()关闭菜单，再执行自定义操作，符合常规交互流程。
• 确保菜单正确渲染：将自定义按钮与默认按钮列表正确组合后传递给工具栏组件，保证所有按钮都能正常显示。

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