Tooltip is a built-in widget in flutter based on material design, which displays a textual description of the widget in a floating label when a user long-pressed and or hover over the widget. Tooltip widget becomes very useful when the UI of the application is too dense to display all the information at once on the screen, in a way it simply makes the app more accessible. There are two ways to implement the Tooltip in a widget, the first one is by using the widget itself and the other way is limited to some widgets such as IconButton, FloatingActionButton, etc which provide tooltip as a property which in turn takes in a string as a parameter. One should remember that the Tooltip widget is customizable through its properties but the tooltip property isn’t.
Constructor of Tooltip Class:
const Tooltip(
{Key? key,
required String message,
double? height,
EdgeInsetsGeometry? padding,
EdgeInsetsGeometry? margin,
double? verticalOffset,
bool? preferBelow,
bool? excludeFromSemantics,
Decoration? decoration,
TextStyle? textStyle,
Duration? waitDuration,
Duration? showDuration,
Widget? child}
)
Properties of Tooltip class:
- child: This property determines the widget for which the tooltip has to be displayed.
- decoration: With the help of decoration property background color, border (Shape), of the tooltip can be controlled.
- excludeFormSemantics: This property takes in boolean as a parameter, and by default it is false. It controls whether the tooltip’s message should be added to the semantic tree or not.
- height: This property determined the height of the tooltip. It takes in double value as a parameter.
- margin: This property determines the empty space around the tooltip. It takes EdgeInsetsGeometry as the parameter.
- message: This property takes a string value as the parameter to display the text in tooltip.
- padding: This property also takes EdgeInsetsGeometry as the parameter to determine the empty space between the border and the main content of the tooltip.
- preferBelow: This property controls whether to display the tooltip on the widget or below that by taking a boolean as the parameter. By default, it is set to true.
- showDuration: This property determines the time in seconds for which the tooltip should be displayed.
- textStyle: This property takes care of the styling of the message in the tooltip such as font size or color.
- verticalOffset: This property controls the vertical distance between the tooltip and the widget.
- waitDuration: This property controls the time after which the tooltip will be made visible once the user hovers over the widget of presses it for more than one second.
Example 1: Basic tooltips.
main.dart
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Menu',
onPressed: () {},
)
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Tooltip(
message: 'Text',
child: Text(
'Flutter is an open-source UI software development kit created by Google. ',
style: TextStyle(
color: Colors.grey,
fontSize: 25,
),
),
),
),
color: Colors.green[50],
width: 300,
height: 175,
),
],
)
),
),
debugShowCheckedModeBanner: false,
));
}
|
Output:
Explanation: Thus app is starting with a simple app bar created with the built-in flutter AppBar widget with a leading menu IconButton. The title of the app bar is Text widget taking a string value of ‘GeeksforGeeks’. The background color assigned to the app bar is greenAccent[400]. In the IconButton tooltip property is being employed, which is also taking a string parameter. One can notice that pressing the menu icon on the screen for more than one-second displays the tooltip with a text menu. This is one of the ways of using tooltip for the widgets, but this is all it has got, we cannot do anything else to change its looks. Another way is by using the Tooltip widget itself as we have done in the body of the app. In the body of the app, we have Center widget as the parent widget with Row as its child that aligns all its children widgets in the center. After that, we have created a Container with some padding and inside that, we have the widget Tooltip. Now, the Tooltip widget is taking Text as its child that prints a string on the screen. When we use Tooltip, the message property is a must provide, and in this case, it is ‘Test’. And similar to the menu icon when the text is hovered or long pressed the tooltip pops up.
Both the tooltips in this app are bare basic built into the flutter. And we haven’t done anything to change their appears, In the second example, we will see how to modify the Tooltip widget.
Example 2: Modified tooltip.
This is the code snippet for the Tooltip widget.
...
child: Tooltip(
message: 'Text',
waitDuration: Duration(seconds: 1),
showDuration: Duration(seconds: 2),
padding: EdgeInsets.all(12),
height: 35,
verticalOffset: 100,
preferBelow: true,
textStyle: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.normal),
decoration: BoxDecoration(
borderRadius:
BorderRadius.only(topRight: Radius.circular(10)),
boxShadow: [
new BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
offset: new Offset(6.0, 6.0),
), //BoxShadow
],
color: Colors.greenAccent[400]), //BoxDecoration
child: Text(
'Flutter is an open-source UI software development kit created by Google. ',
style: TextStyle(
color: Colors.grey,
fontSize: 25,
), //TextStyle
), //Text
), //Tooltip
...
Output: If the above properties are used then the output will look like this.
Explanation: Flutter doesn’t give the option to modify the tooltip property as used in the menu icon. But if we want to tweak the looks of the tooltip we can always embed it in a Tooltip widget. But flutter provided multiple properties (mentioned above) to change the look and feel of tooltips. In this app, the first change we have made after the message property is the addition of the property waitDuration which takes in Duration as its child which in turn takes the amount of time in seconds to wait before showing tooltip after a user does the appropriate action. Then we have used the showDuration property which is similar to the waitDuration, it controls for how long the tooltip will be displayed. After that, we have the padding which is taking EdgeInsets.all(12) as the parameter to provide the gap between the border of the tooltip and the child widget. A height is 35 is given to tooltip using is height property. The verticalOffset is set to 100 to display the tooltip below the Text widget. Next is the preferBelow property which controls whether to display the tooltip on the widget itself or below it. The preferedBelow property is true by default. But we can see that in the above first example the tooltip is being displayed on the text itself. The reason for this is the size of the Text widget, it’s too big for tooltip it to crossover as it does in with the menu icon. So to change this behavior we have used the verticalOffset property. All this is followed by textStyle, decoration, and child properties. The child property is the same as the previous example which is taking the Text widget as a child. The textStyle property is adding style to the message property, in this property the font size is set to 15, text color to white, and font-weight to normal. The decoration property is in charge of the styling of the tooltip box, in this case, we have made one of the corners round, added a shadow to the tooltip, and gave green color to the tooltip.
Flutter also offers some other ways of displaying the description of a widget in a more beautiful way. One of the ways is by using showcaseview package. And if you still want something different you can create your own custom widget to do the job.
Similar Reads
Flutter - ListTile Widget
The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example. The Constructor of the ListTile classListTile({ Key key, Widget leading, Widget title, Widget subtitle, Widget trailing, bool is
4 min read
Flutter - Stepper Widget
In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. Stepper is generally used in filling forms online. For example, remember filling an online form for applying to any university or passport or driving license. We filled
8 min read
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Flutter - RadioListTile Widget
RadioListTile is a widget that combines a radio button with a list tile. It is often used in scenarios where you need to present a list of mutually exclusive options, and the user can select one option from the list. Each RadioListTile represents a single option in the list and consists of a title,
6 min read
Flutter - Stack Widget
The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
Flutter - FlutterLogo Widget
FlutterLogo widget is as simple as it sounds, it is just the flutter logo in the form of an icon. This widget also comes built-in with Flutter SDK. This widget can found its use as a placeholder for an image or icon. Below we will see its implementation with all its properties and constructor. Const
3 min read
Flutter - Transform Widget
The Transform widget in Flutter is used to apply various transformations to its child widget, such as rotation, translation (positioning), scaling, and skewing. In this article, we are going to implement all transformations such as rotation, translation (positioning), scaling, and skewing made by th
6 min read
Flutter - GridPaper Widget
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. How to use it?[GFGTABS] Dart G
3 min read
Flutter - InkWell Widget
InkWell is the material widget in flutter. It responds to the touch action as performed by the user. Inkwell will respond when the user clicks the button. There are so many gestures like double-tap, long press, tap down, etc. Below are the so many properties of this widget. We can set the radius of
2 min read
Flutter - SliverAppBar Widget
SliverAppBar is a Material Design widget in Flutter that gives a scrollable or collapsible app bar. The word Sliver is given to scrollable areas here. It allows us to create an app bar that can change appearance, blend in the background, or even disappear as we scroll. We already had AppBar widget i
5 min read