Flutter Tooltip
A tooltip is a material design class that can be used as text labels to tell the functionality of a user interface action. In other words, it shows additional information to the user when he moves or points over a particular ui. It increases the accessibility. If we wrap the child with it to provide the useful info.
Properties:
The following are the properties used to customize the application.
- message: message used to display in the tooltip.
- height: specifies the height of the tooltip’s child.
- textStyle: style for the message of the tooltip.
- margin: determines the empty space around the tooltip.
- showDuration: specifies the time for showing the tooltip when long press is released. By default, it’s 1.5 seconds.
- decoration: defines the shape and background color of the tooltip. Default shape is a rounded rectangle that has a border-radius of 4.0 pixels.
- verticalOffset: determines the vertical gap between the tooltip and the widget.
Example
import 'package:flutter/material.dart';
void main() {runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage()
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Tooltip Example"),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:[
Container(
margin: EdgeInsets.all(10),
child: Tooltip(
waitDuration: Duration(seconds: 1),
showDuration: Duration(seconds: 2),
padding: EdgeInsets.all(5),
height: 35,
textStyle: TextStyle(
fontSize: 15, color: Colors.white, fontWeight: FontWeight.normal),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), color: Colors.green),
message: 'My Account',
child: FlatButton(
child: Icon(
Icons.account_box,
size: 100,
),
)),
),
Container(
margin: EdgeInsets.all(10),
child: Tooltip(
message: 'My Account',
child: FlatButton(
child: Icon(
Icons.account_box,
size: 100,
),
)
),
)
]
),
);
}
}
Output
