super_tooltip

SuperTooltip It is super flexible and allows you to display ToolTips in the overlay of the screen. It gives you more flexibility over the Flutter standard Tooltip. You have the option to make the whole screen covered with a background color. Tapping on the background closes the Tooltip.

Installing

Run this command:

With Flutter:

 flutter pub add super_tooltip

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  super_tooltip: latest

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now in your Dart code, you can use:

import 'package:super_tooltip/super_tooltip.dart';

Getting Started

You have to make your Widget a StatefulWidget and you just need to create a controller to manage state of tooltips, you can do so by defining an instance of a SuperTooltipController and pass it through to constructor.

  final _controller = SuperTooltipController();

  child: SuperTooltip(
    _controller: tooltipController,
    // ...
    )

    void makeTooltip() {
        _controller.showTooltip();
    }

You need to wrap SuperTooltip with a GestureDetector, MouseRegion or InkWell that is responsible for showing and hiding the content. Further handling of the tooltip state can be managed explicitly through a controller

    child: GestureDetector(
      onTap: () async {
        await _controller.showTooltip();
      },
      child: SuperTooltip(
        showBarrier: true,
        controller: _controller,
        content: const Text(
          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,",
          softWrap: true,
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        child: Container(
          width: 40.0,
          height: 40.0,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
          ),
          child: Icon(
            Icons.add,
            color: Colors.white,
          ),
        ),
      ),
    ),

SuperTooltip just need one required argument which is the content. You can pass a child Widget which can be an icon to represent the what should be clicked. As showed in the example below.

SuperTooltip(
    content: const Text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
    softWrap: true,
    style: TextStyle(
        color: Colors.white,
        ),
    ),
    child: Container(
        width: 40.0,
        height: 40.0,
        decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
        ),
        child: Icon(
            Icons.add,
            color: Colors.white,
        ),
    ),
),

Change the background by passing the backgroundColor.

SuperTooltip(
    backgroundColor: Color(0xff2f2d2f),
    //....
),

Change Popup direction to TooltipDirection.right, TooltipDirection.left, TooltipDirection.bottom and TooltipDirection.up

SuperTooltip(
    popupDirection: TooltipDirection.right,
    //...
)

DecorationBuilder

To customize the shape of the popup or apply your own decoration, you can utilize the decorationBuilder property. This allows you to access the target property and define a custom shape or decoration for the tooltip.

SuperTooltip(
    decorationBuilder:(target){
      return ShapeDecoration(
          //...
        shape: CustomShape(
          //...
          target: target,
        ),
      );
    }
    //...
)

Barrier

If you'd like to keep the user from dismissing the tooltip by clicking on the barrier, you can change showBarrier to true which means pressing on the scrim area will not immediately hide the tooltip.

SuperTooltip(
    showBarrier: true,
    barrierColor: Colors.red,
    //...
)

Blur

If you'd like to also show blur behind the pop up, you can do that by making the showDropBoxFilter to true you must also enable showBarrier then set sigmaX and sigmaY

SuperTooltip(
    showBarrier: true,
    showDropBoxFilter: true,
    sigmaX: 10,
    sigmaY: 10,
    //...
)

If you'd like to simply react to open or close states, you can pass through onHide or onShow callbacks to the default constructor.

SuperTooltip(
  onDismiss: () {
    // Maybe continue tutorial?
  },
  onShow: () {
    // Start animation?
  }
),

To hide the tooltip when the user tap the back button. Wrap your GestureDetector widget with WillPopScope widget passing a callback function to onWillPop like the example below

    return WillPopScope(
      onWillPop: _willPopCallback,
      child: GestureDetector(
        onTap: () async {
          await _controller.showTooltip();
        },
        // ..
      ),
    );

Create a callback function to dismiss

  Future<bool> _willPopCallback() async {
    // If the tooltip is open we don't pop the page on a backbutton press
    // but close the ToolTip
    if (_controller.isVisible) {
      await _controller.hideTooltip();
      return false;
    }
    return true;
  }

Example app

Find the example app here.

Made with contrib.rocks.

Contributing

Contributions are welcome. In case of any problems look at existing issues, if you cannot find anything related to your problem then open an issue. Create an issue before opening a pull request for non-trivial fixes. In case of trivial fixes open a pull request directly.