Flutter: how to build a custom toolbar for Selectable Text~

Question

I'm building a ChatApp, and I need a feature that can allow user to select text from the widget, and also show some of my custom actions, such as Deleting that message, Share etc.

And I found that the SelectableText widget would be helpful, but the only downside of it is that I have to create a custom TextSelectionControls class and pass it to the SelectableText widget selectionControls property in order to add my own actions, but I really don't know how to do it, so does anyone have idea about how to create this kind of class?

I already visited this link: Github: Custom text selection menu example, but after I copy and paste his code, it shows me this error message at compile time:

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)

But I don't think I missed something, since the people on Github doesn't, so is it because the issue of the Flutter framework itself?

Answer 1

With the release of Flutter 3.7, you can easily add custom context actions to any widget, including Text widgets.

SelectableText(
              'My Text',
              contextMenuBuilder: (context, editableTextState) {
              return AdaptiveTextSelectionToolbar(
                  anchors: editableTextState.contextMenuAnchors,
                  children: [
                    InkWell(
                      onTap: (){},
                      child: SizedBox(
                        width: 200.0,
                        child: Text('Note'),
                      ),
                    )
                  ]);
            },
          ),

More examples can be found here.