The Tooltip widget in Flutter is used to provide additional information when the user long-presses or hovers over a widget. It's commonly used to display helpful hints or descriptions for UI elements.
Attributes:
message (String):
- The message to be displayed in the tooltip when the user long-presses or hovers over the widget.
child (Widget):
- The widget to which the tooltip should be attached. Typically, this is the widget that requires additional explanation.
height (double):
- The height of the tooltip. If not provided, the height is determined automatically based on the content.
padding (EdgeInsets):
- The padding around the content of the tooltip.
verticalOffset (double):
- The vertical offset of the tooltip from its default position. Use negative values to move it above the widget.
preferBelow (bool):
- Whether the tooltip should prefer to be displayed below the widget. If set to false, it may be displayed above the widget if there is not enough space below.
Example:
import 'package:flutter/material.dart';
class TooltipExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tooltip Widget Example'),
),
body: Center(
child: Tooltip(
message: 'Click me!',
child: IconButton(
icon: Icon(Icons.info),
onPressed: () {
// Perform action
},
),
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: TooltipExample(),
));
}
Explanation:
In this example, a Tooltip widget is attached to an IconButton to provide additional information when the user hovers over it.
The message attribute is set to 'Click me!' which will be displayed as a tooltip.
The child attribute is set to the IconButton, indicating that the tooltip should be attached to it.
When the user hovers over or long-presses the icon button, the tooltip with the specified message will be displayed.
Tooltips are a useful way to provide hints or descriptions for UI elements, improving the usability of your app.