ToolTip in Flutter

176

A tooltip widget is used to display message when users performs an actions like hover, taps, focus on the element.

In this article, we will discuss about fundamentals of tooltip widget in flutter. Here, we will learn through basic example.

Constructor of Tooltip

(new) Tooltip 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,
  TooltipTriggerMode? triggerMode,
  bool? enableFeedback,
})

Basic Syntax

Tooltip(
   message: 'This is a tooltip',
   child: ElevatedButton(onPressed: () {}, child: const Text('Button')),
)

Code Implementation

import 'dart:ui';

import 'package:flutter/material.dart';

class ToolTipPage extends StatelessWidget {
  const ToolTipPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ToolTip Example"),
        centerTitle: true,
      ),
      body: Center(
        child: Tooltip(
          message: "This is a tooltip message",
          textStyle: const TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.w600,
              color: Colors.white,
              fontStyle: FontStyle.italic),
          padding: const EdgeInsets.all(16.0),
          // margin: const EdgeInsets.all(10),
          decoration: const BoxDecoration(color: Colors.pinkAccent),
          child: SizedBox(
            height: 200,
            width: 300,
            child: Image.asset(
              "assets/Images/girl.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

Output

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/tooltip

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.