super_tooltip 2.0.7 copy "super_tooltip: ^2.0.7" to clipboard
super_tooltip: ^2.0.7 copied to clipboard

Super flexible Tooltip class that gets opend in the screens overlay

super_tooltip #

Static code analysis

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,
    //... 
)

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.

Author #

Credit to escamoteur as the creator of the package

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.

195
likes
120
pub points
98%
popularity

Publisher

verified publisherbensonarafat.com

Super flexible Tooltip class that gets opend in the screens overlay

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on super_tooltip