flutter-tutorial

Flutter Tooltip

When a user long presses or hovers over a widget in flutter, the tooltip is a built-in widget based on material design that shows a textual description of the widget in a floating label. When the application’s UI is too dense to display all of the information at once on the screen, the tooltip widget comes in handy; it essentially makes the app more accessible.

There are two ways to implement Tooltip in a widget: one is to use the widget itself, and the other is confined to widgets like IconButton, FloatingActionButton, and others that give tooltip as a property that takes a string as an input. It’s important to know that the Tooltip widget’s properties are editable, but the tooltip property is not.

Properties

The Tooltip class has the following properties:

  • child: The widget for which the tooltip must be displayed is determined by this attribute.
  • decoration: The background colour and border (Shape) of the tooltip can be modified using the decoration parameter.
  • excludeFormSemantics: This property has a boolean parameter, which is false by default. It determines whether or not the tooltip’s message is added to the semantic tree.
  • height: The height of the tooltip was set by this attribute. As an argument, it accepts a double value.
  • margin: This parameter controls the amount of empty space around the tooltip. It has a parameter called EdgeInsetsGeometry.
  • message: To display text in a tooltip, this property accepts a string value as an argument.
  • padding: This property uses EdgeInsetsGeometry as a parameter to define the amount of empty space between the tooltip’s border and its main content.
  • preferBelow: This property takes a boolean as a parameter and affects whether the tooltip is displayed on the widget or below it. It is set to true by default.
  • showDuration: This parameter specifies how long the tooltip should be displayed in seconds.
  • textStyle: This property controls how the message in the tooltip is styled, such as font size and colour.

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
          title: Text('Learn Code Zone'),
          backgroundColor: Colors.blue,
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ) //IconButton
          ), //AppBar
      body: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Tooltip(
                message: 'Text',
                child: Text(
                  'Flutter is an open-source UI software development kit created by Google. ',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 25,
                  ), //TextStyle
                ), //Text
              ), //Tooltip
            ), //Padding
            color: Colors.blue[50],
            width: 300,
            height: 175,
          ), //Container
        ], //<Widget>[]
      ) //Row
          ), //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false,
  )); //MaterialApp
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.