The Startup
Published in

The Startup

Making Custom Hints/Tooltips With OverlayEntry in Flutter

The OverlayEntry animating across the screen (right to left)

Want to give some type of dialog in response to an action but the provided Tooltip class just isn’t doing it for you? Maybe it’s time to look at implementing an OverlayEntry.

What is a tool tip?

A tool tip is generally a static text label that appears over something on your screen that provides more insight into what that something does. Some widgets come out of the box with a tooltip property that you can set:

The text description of the tooltip property of FloatingActionButton

For example, a FloatingActionButton comes with this property and it is shown if a user long-presses on the button:

The tooltip text from the FloatingActionButton
FloatingActionButton’s tooltip

Without creating a custom FloatingActionButton , there isn’t much customization available for your tool tip. Side note: if you want to see how to customize a Flutter widget, I wrote an article showing you how to do that here.

You can, however, use the Tooltip widget directly by wrapping it over another widget. In this case, I wrapped a standard Text widget with the Tooltip to create a custom message:

Tooltip(    message: "Hi this is the standard tip",    child: Text(        'You have pushed the button this many times:',   ),),
The text message from the Tooltip widget

When you tap and hold on the Text, it displays the message that you set. Using ToolTip gives you many more options to customize such as its height, style, vertical offset, and duration:

All of the custom properties of the Tooltip widget

Overriding the default Tooltip parameters can provide a pretty customized message:

The custom tool tip created by the Tooltip widget

Maybe something above suits your needs, but if you want to add an animation or show the tool tip after a different gesture, we can make our own using OverlayEntry.

Making our Custom “tool tip”

To make what you see in the top video, follow these steps:

First, we will use a GestureDetector widget and put a Text widget as its child. I want this tool tip to appear if the user double taps on the text, so I’m going to include an onDoubleTap property:

The basic GestureDetector widget that will encapsulate our OverlayEntry

Now, let’s create our actual OverlayEntry. Create a new .dart file and name it whatever you please (mine is called hint_overlay.dart). In your new file, create a new StatefulWidget and name it according to your needs (mine is called HintOverlay). While you are there, add the SingleTickerProviderStateMixin implementation (because we need that for the animation) and the initState and dispose methods:

The basic HintOverlay class created

We need HintOverlay to take two parameters:

1. A reference to the OverlayEntry that HintOverlay will be inserted into (entry)

2. A message to be displayed as the hint (message):

Requiring HintOverlay to take two parameters: entry and message

(Obviously you can set as many parameters as you please, but you will see why we need a reference to at least the OverlayEntry passed in)

I want my tool tip to show via an animation — sliding from the right side of the screen to the left side of the screen, so I’m going to add that AnimationController and Tween animation inside the HintOverlay’s initState:

Additionally, I’m creating a timer (_startTimer) that will remove the OverlayEntry after a given time. I’ll start it in initState and I’ll set its duration to one second higher than what the AnimationController’s duration is set to, that way it is removed after it is off-screen:

Our startTimer function that will remove the OverlayEntry we passed in

When we call .remove() on the OverlayEntry that we passed in (widget.entry), dispose() will be activated. This is why we pass in that entry reference.

Back to the main.dart file, we have to create the actual OverlayEntry and have that return our new HintOverlay widget. We will then have our OnDoubleTap property return our inserted OverlayEntry.

Our full GestureDetector/OverlayEntry set up

Now that everything is set up, we can double-tap on the “My Overlay Entry tip” text and our tip should slide across the screen in a marquee-ish style. Here it is again:

The OverlayEntry animating across the screen (right to left)
Here it is again

This type of tool tip/hint can be used for other purposes, as I use this style with creating notification overlays for “heads-up” chat notifications and the like.

There should be enough here to get you rolling in your own direction. Reach out to me if you need help with any of it.

Final note: Regarding accessibility, you can wrap your widgets with a Semantics widget and set your data with that. You can find more information about accessibility details on the Flutter Accessibility page here.

Here is the full code for both the main.dart file and the hint_overlay.dart file (I removed most of the boilerplate Flutter code from main.dart):

Main.dart

hint_overlay.dart

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Installing DigiVault for DigiAssets on Windows

Find Smallest Letter Greater Than Target

7 best free and open source software solutions for database management

Why my book uses Node.js and JavaScript

Introduction To JVM Architecture 🧑‍💻

Lessons Learned From Dockerizing Our Applications

Data Structures and Algorithms:

Remove Adobe Genuine Software Integrity Service Mac

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
Rob Jones

Rob Jones

Programmer/Generalist/Intraday Algo Trader

More from Medium

Flutter AndroidView forbidden parameter

Writing Tests in Flutter {Part 1} : How to write Unit tests in Flutter

Setup Flutter: IDE Configuration — iOS

How to connect Firebase with your Flutter Android Application