Custom Context Menus in Flutter
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 SelectableText
widget.
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).
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.
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: