Flutter custom selection toolbar


A while back I needed to implement a custom option for text selection toolbar. What is a text selection toolbar you might ask? It is the options- box that is shown when highlighting text:

Text selection toolbar by default.

What I needed was a custom button that could execute a custom action on the selected text.

Custom toolbar with a custom button.


To get this selection behavior for text in Flutter a SelectableText widget must be used. By default there are some default options that can be enabled.

Default ToolbarOptions.

However, in order to get something truly customizable we need to extend the existingMaterialTextSelectionControls.


In essence we need to extend one of the existing TextSelectionControls classes. For my use case I’m going to extendMaterialTextSelectionControls class. If you are interested to learn why there is no easier way there is an open issue in GitHub.

Extending MaterialTextSelectionControls class.

Here is the whole class you can copy pasta this to a custom_text_selection_file.dart.

As the “custom functionality” I’m getting the start and end index of the selection. However, you can do whatever you desire with the text selection delegate.

Custom functionality of the custom button.

In the UI code we can use the CustomTextSelectionControlsin a SelectableTextwidget.

Code for the UI.

Here is the code for the UI.

UI code using CustomTextSelectionControls.


Now when we run the application and click the custom button we get this text as output.

Example of the application.

This article was inspired by this GitHub thread. For more information about custom text selection toolbars check out this example by justimc.

If you have suggestions or questions leave them below, and give a clap if you enjoyed. Thank you for reading! :)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store