fluttertextselectionflutter-textflutter-exception

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


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?


Solution

  • 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.