CODEWITHSUNDEEP
flutterdarttooltipflutter-layout
Simon Hutton
Simon Hutton

Reputation: 1777

Customising flutter Tooltip

Is there a way to customise the Flutter tooltip to change colour and increase the padding/margins. The default seems to fill the width of the whole screen and there are no named parameters to configure this any further. The code below produces a Tooltip as shown in the screenshot.

Tooltip(child:  IconButton(icon: Icon(Icons.info, size: 30.0)),
        message: 'Lorem ipsum dolor sit amet, consectetur '
                 'adipiscing elit, sed do eiusmod tempor incididunt '
                 'ut labore et dolore magna aliqua. '
                 'Ut enim ad minim veniam, quis nostrud exercitation '
                 'ullamco laboris nisi ut aliquip ex ea commodo consequat',
        padding: EdgeInsets.all(20),
        preferBelow: true,
        verticalOffset: 20,
        )

enter image description here

I'm trying at the very least to pad it away from the edge of the screen and display it in a more compact manner. Obviously wrapping the Tooltip in Padding just affects the positioning of the child widget (the IconButton) rather than the Tooltip itself.

Ideally I'm looking to display a tooltip something with a similar format to the one below. And super-ideally I'd like it to be displayed with a single tap rather than a long press. I'm guessing Tooltip isn't necessarily the widget I should be using?

enter image description here

Upvotes: 11

Views: 27947

Answers (2)

Zihan
Zihan

Reputation: 942

You should use richMessage instead of message and you can customise it with different things. you can insert a widget here so you can customise it however you want. here is a basic example:

    Tooltip(
      padding: const EdgeInsets.all(Spacing.xlarge),
      decoration: const BoxDecoration(color: Color(0xffE7E5FB)),
      richMessage: WidgetSpan(
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: Container(
          padding: const EdgeInsets.all(10),
          constraints: const BoxConstraints(maxWidth: 300),
          child: Text(
            'The description of the tooltip',
          ),
        ),
      ),
      child: Icon(Icons.info),
    );

Upvotes: 3

ilike2breakthngs
ilike2breakthngs

Reputation: 415

For the padding that you are referring to, you will have to use the margin parameter. The padding is for the internal space and margin is for outside.

For the background color, use the decoration parameter and for text, use textStyle.

Here's an example:

Tooltip(
  child: IconButton(icon: Icon(Icons.info, size: 30.0)),
  message: 'Lorem ipsum dolor sit amet, consectetur '
           'adipiscing elit, sed do eiusmod tempor incididunt '
           'ut labore et dolore magna aliqua. '
           'Ut enim ad minim veniam, quis nostrud exercitation '
           'ullamco laboris nisi ut aliquip ex ea commodo consequat',
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(20),
  showDuration: Duration(seconds: 10),
  decoration: BoxDecoration(
    color: Colors.blue.withOpacity(0.9),
    borderRadius: const BorderRadius.all(Radius.circular(4)),
  ),
  textStyle: TextStyle(color: Colors.white),
  preferBelow: true,
  verticalOffset: 20,
)

As for the single tap, you will have to make an iteration of this widget for yourself. The easiest way would be to view the source code, copy it over to your project, change the direct references from import colors.dart'; to import 'package:flutter/src/material/colors.dart'; and then make the necessary change you want.

For single tap, search for GestureDetector and add the same value from onLongPress to onTap:

    Widget result = GestureDetector(
      behavior: HitTestBehavior.opaque,
      onLongPress: _handleLongPress,
      onTap: _handleLongPress,
      excludeFromSemantics: true,
      child: Semantics(
        label: excludeFromSemantics ? null : widget.message,
        child: widget.child,
      ),
    );

Poke around and you might find other ways to customize it to your liking!

Upvotes: 10

Related Questions