Hello Flutter Dev’s, here we will discuss the flutter tooltip with example. Previously we have seen a text widget that was one way to provide information to the application user. However, in this article, we will discuss another method to display additional information. This additional information can be the functionality of interacting widgets. In short, this second widget allows us to display additional information to the user.
For example, if an input box is given in the form fields. And wants to display the input pattern that needs to be accepted by the application. Another example can be the Button. Buttons such as IconButton, FloatingActionButton, as well as PopupMenuButton has a built-in parameter to have a tooltip. As we all know that widgets are the main key point in a flutter design. Hence to show this additional information flutter has a Tooltip widget. So, let’s have a look at the Flutter Tooltip widget:
Flutter Tooltip Constructor:
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
}
)
Flutter tooltip constructor has a mandatory or you can say required parameter called message. This message contains the string that provides additional information for the particular action. Previously we have seen the text styling in our previous blog of a text widget, the same text styling can be used for styling the text in the tooltip. And another important property is Duration. Duration plays an important role. It decides that for how long does the tooltip must be displayed to the user.
Code:
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: ‘Flutter Demo Home Page’),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: ,
),
);
}
}
Output:
The above example shows the flutter tooltip when hovered on the HQ button (IconButton). This gives the information that the HQ button is nothing but a button and has click functionality. Hence, this is how the flutter tooltip works. To make work this tooltip remember that the tooltip on web view appears as soon as we hover the button. But in mobile, we need to press the button for a long to appear on the tooltip. That is called as Long press.
To run the above same code, please visit my gitHub: here
