Custom Context Menus in Flutter

Harshvardhan Shinde
4 min readMay 9, 2023

--

Using the all-new custom context menus in Flutter with examples

Flutter 3.7 introduced a ton of new features and improvements. Today we will dive into one of the new features: custom context menus. So let’s get started!

Context Menus

From the documentation, context menus, or text selection toolbars, are the menus that show up when long pressing or right clicking on text in Flutter, and they show options like Cut, Copy, Paste, and Select all.

We will start by creating a default context menu and keep building on top of that. We will see how we can create platform-adaptive menus and platform-specific menus, and we will end with a simple example to demonstrate the power of custom context menus.

Default Context Menu

We can create the default context menu simply by using the SelectableTextwidget.

const SelectableText('Default context menu.'),

This will yield a simple context menu, as shown below:

Adaptive Context Menu

Let’s now create a custom context menu that is adaptive to the platform that you are using (Android, iOS, or desktop).

Adaptive context menu

Here, we use the AdaptiveTextSelectionToolbar to create a context menu that will follow the platform style for creating context menus. You will see an Android-style menu if you run it on Android devices or an iOS style menu if you run it on an iPhone, just like in our case, and will yield the following output:

We can also force the menu to follow a particular platform style. Suppose if you want to force it to follow a desktop-style, you could do so by passing DesktopSelectionToolbar to contextMenuBuilder , although not needed, there is an ability to do so.

Let’s now move to the most interesting part, where we will be creating a custom context menu that will enable us to call a number when a valid phone number is selected.

Custom Context Menu

Let’s now see the power of custom context menus and how they can be used to perform custom operations based on what is selected by the user.

In our case, we will have a TextField containing some text and a valid phone number. When the number is selected, we will create a custom context menu that allows the user to call the number.

Custom phone menu

In the above code, we have a simple TextField with some text and a valid phone number. We create a custom context menu using contextMenuBuilder which takes the current context and the editableState . We will create a ContextMenuButtonItem to create our own button and add it as the first item to the default button list. We are adding it only when it is a valid phone number using a custom method isValidPhone that takes in a phone number and returns true if the number is valid. Lastly, we return an adaptive context menu that will have platform specific styles.

This article only includes the necessary code for brevity, you can find the GitHub link to the full source code repository at the end of the article.

Note that the call number will not be visible on the context menu unless the selected text contains a valid phone number. In our example, we are just showing a dialog on the call number for simplicity, you can replace it with code that actually calls the number.

This is just one of the ways in which you can use the custom context menu, it can also be used to, let’s say, download an image on a long press, and so on. The possibilities are endless!

Conclusion

In this article, we explored the all-new custom context menus and how you can use them as per your use case with the help of a simple example.

There are many ways in which custom context menus can be used, and I hope this article helped you get started and gave you a fair idea about their capabilities.

The complete source code can be found at the link below:

Thanks for reading the article. If you enjoyed the article or learned something new, show your support by clapping as many times as possible. 👏

It really motivates me to keep writing more!

Feel free to correct mistakes if there are any.

Let’s Connect:

--

--

Harshvardhan Shinde
Harshvardhan Shinde

Written by Harshvardhan Shinde

Data Engineer at QuillBot | Flutter Enthusiast | COEP

No responses yet