flutterdarttooltipflutter-desktop

How to make a tooltip that contains information, images and icons with flutter?


I am trying to make a desktop application where there are characters from a game and I need that when the mouse is positioned over it by hovering, an information box about it is displayed on the character.

I tried with the tooltip widget, but it only works for text and it is not what I need, I need to be able to show images, icons, etc, in short, the widget that I want.

Something similar to this image.

Tooltip width image and icons

What I mean could be a code like this:

Widget build(BuildContext context) {
    return Center(
      child: Tooltip(
        message: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey,
          ),
          child: Column(
            children: [
              const SizedBox(height: 10),
              Text(
                'This is a tooltip',
                style: TextStyle(
                  fontSize: 14,
                ),
              ),
              const SizedBox(height: 10),
              Icon(Icons.thumb_up_alt),
            ],
          )
        ),
        child: Image.asset(
          'assets/image.png',
          height: 300,
          width: 300,
        ),
      ),
    );
  }

It is a single example of code that does not work but it is useful to understand what I need.

PS: I don't know how to make the image show like some people do in other questions, sorry for the inconvenience.


Solution

  • You can use richMessage option available inside Tooltip, which support any widget you want to pass to the tooltip

        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: Row(
                children: [
                  const Icon(Icons.abc_outlined),
                  const SizedBox(width: 20),
                  SizedBox(
                    width: 200,
                    child: Text(
                      'This is a example tooltip text which is visible inside',
                    ),
                  ),
                ],
              ),
            ),
          ),
          child: Icon(
            Icons.info,
            size:  12,
          ),
        );