Implement Tooltip In Flutter
A tooltip shows a useful message when users hover, tap, or focus on a component. In Flutter, you can utilize a built-in widget named Tooltip to make tooltips effortlessly. It widget turns out to be extremely valuable when the UI of the application is too thick to even think about showing all the data at once on the screen, in a way it essentially makes the application more open.
In this blog, we will explore the Implement Tooltip In Flutter. We will see how to implement a demo program and we will see how to use Tooltip in your flutter applications.
Tooltip class – material library – Dart API
A material design tooltip. Tooltips provide text labels that help explain the function of a button or other user…api. flutter.dev
Table Of Contents::
Tooltip:
A tooltip is a material design class in Flutter that gives text marks to clarify the functionality of a button or UI action. All in all, it is utilized to show extra data when the user moves or focuses over a specific widget. It expands the availability of our application. Assuming we wrap the widget with it, it is exceptionally valuable when the user long presses the widget because, all things considered, it shows up as a floating label.
There are two different ways to execute the Tooltip in a widget, the first is by utilizing the actual widget and the alternate way is restricted to certain widgets like IconButton, FloatingActionButton, and so forth which give tooltip as a property that thusly takes in a string as a parameter.
Demo Module ::
The above demo video shows how to use Tooltip in a flutter. It shows how Tooltip will work in your flutter applications. It shows when the user tap log pressed on the image, then shows a popup message. It will be shown on your device.
Constructor:
To utilize Tooltip, you need to call the constructor underneath:
const Tooltip({
Key? key,
required this.message,
this.height,
this.padding,
this.margin,
this.verticalOffset,
this.preferBelow,
this.excludeFromSemantics,
this.decoration,
this.textStyle,
this.waitDuration,
this.showDuration,
this.child,
})
In the above Constructor, all fields marked with @required must not be empty.
Properties:
There are some properties of Tooltip are:
- > child: This property is utilized to decide the widget for which the tooltip must be shown.
- > decoration: This property with the assistance of decoration property background color, border (Shape), of the tooltip can be controlled.
- > excludeFormSemantics: This property is used to take 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 is used to determine the height of the tooltip. It takes in double value as a parameter.
- > margin: This property is used to determine the space around the tooltip. It takes EdgeInsetsGeometry as the parameter.
- > message: This property is used to take a string value as the parameter to display the text in the tooltip.
- > padding: This property is used to also take EdgeInsetsGeometry as the parameter to determine the space between the border and the main content of the tooltip.
- > preferBelow: This property is used to control 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 is used to determine the time in seconds for which the tooltip should be displayed.
- > textStyle: This property is used to take care of the styling of the message in the tooltip such as font size or color.
- > verticalOffset: This property is utilized to control the vertical distance between the tooltip and the widget.
- > waitDuration: This property is utilized to control the time after which the tooltip will be made apparent once the user floats over the widget of presses it for over one second.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the body, we will add a Center widget. In this widget, we will add the Tooltip() widget. Inside the widget, we will add a message that means it takes a string value as the parameter to display the text in the tooltip and it is a required property so must not be empty. Next, we will add padding, margin, decoration with color and border-radius.
Center(
child: Tooltip(
message: 'FlutterDevs is a protruding flutter app development company with an extensive '
'in-house team of 30+ seasoned professionals who know exactly what you need '
'to strengthen your business across various dimensions.',
padding: const EdgeInsets.all(30),
margin: const EdgeInsets.only(top: 30, left:30,right: 30),
decoration: BoxDecoration(
color: Colors.blueAccent.withOpacity(0.6),
borderRadius: BorderRadius.circular(22)),
textStyle: const TextStyle(
fontSize: 15,
fontStyle: FontStyle.italic,
color: Colors.white),
child: SizedBox(
width: 320,
height: 150,
child: Image.asset(
'assets/logo.png',
fit: BoxFit.cover,
),
)))
We will add a textStyle means it takes care of the styling of the message in the tooltip such as font size or color. In child property, we will add the SizedBox widget. In this widget, we will add width, height, and its child property, we will add an image. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_tooltips_demo/splash_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blueAccent.withOpacity(0.6),
automaticallyImplyLeading: false,
title: Text('Flutter Tooltip Demo'),
),
body: Center(
child: Tooltip(
message: 'FlutterDevs is a protruding flutter app development company with an extensive '
'in-house team of 30+ seasoned professionals who know exactly what you need '
'to strengthen your business across various dimensions.',
padding: const EdgeInsets.all(30),
margin: const EdgeInsets.only(top: 30, left:30,right: 30),
decoration: BoxDecoration(
color: Colors.blueAccent.withOpacity(0.6),
borderRadius: BorderRadius.circular(22)),
textStyle: const TextStyle(
fontSize: 15,
fontStyle: FontStyle.italic,
color: Colors.white),
child: SizedBox(
width: 320,
height: 150,
child: Image.asset(
'assets/logo.png',
fit: BoxFit.cover,
),
))),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Tooltip in a flutter; you can modify this code according to your choice. This was a small introduction to Tooltip On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Tooltip in your flutter projects. We will show you what the Tooltip is?. Show constructor and properties of the Tooltip. Make a demo program for working Tooltip. It shows when the user long-press the widget, then shows a popup message in your flutter application. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
