overlay_tooltip 0.2.1 icon indicating copy to clipboard operation
overlay_tooltip: ^0.2.1 copied to clipboard

An overlay tooltip handler for onboarding

Overlay_tooltip #

A Package that helps display tooltips for onboarding certain features in your app.

Motivation #

Due to the non-flexibility of some other tooltips packages, Overlay tooltip is designed to give you control over the nature of your tooltips widget, overlay colors, when to start/dismiss tooltips and moving between previous/next tooltips.

Usage #

To use this package :

  • add the dependency to your pubspec.yaml file.
dependencies:
  flutter:
    sdk: flutter
  overlay_tooltip:

Setup #

1. First of all, create a TooltipController. This should be created for every screen where tooltip is to be shown as it handles operations like starting, dismissing, moving to next/previous and pausing tooltips etc.

final TooltipController _controller = TooltipController();

This also provides ability to add an onDone method that runs when the tooltips for that controller is completed.

 _controller.onDone(() {
    // add function to occur
     setState(() {
	  done = true;
     });
  });

2. Next, wrap the area or screen where tooltip is to be displayed with the OverlayTooltipScaffold. Here you can pass in your controller, an overlay color, tooltip animations etc.

return OverlayTooltipScaffold(
	  overlayColor: Colors.red.withOpacity(.4),
	  tooltipAnimationCurve: Curves.linear,
      tooltipAnimationDuration: const Duration(milliseconds: 1000),
      controller: controller,
      child: Scaffold(
	 	 ...
	  )
	);

3. Wrap individual widgets to be displayed with an OverlayTooltipItem widget.

OverlayTooltipItem(
         displayIndex: 0,
          tooltip: (controller) =>
		  		Padding(
                        padding: const EdgeInsets.only(left: 15),
                        child: MTooltip(
                            title: 'Some Text Tile',
                            controller: controller),
                          ),
          child: _sampleWidget()
		),

This widget can be instantiated with the following parameters:

  • displayIndex - This ensures the order in which the tooltips are displayed

  • tooltip - This is a widget function that exposes the controller and can be used to create a custom widget to display as the tooltip.

  • tooltipVerticalPosition - The vertical positioning of the tooltip in relation to the main child widget, defaults to TooltipVerticalPosition.BOTTOM. Other options are TooltipVerticalPosition.TOP

  • tooltipHorizontalPosition - The horizontal positioning of the tooltip, defaults to TooltipHorizontalPosition.WITH_WIDGET and this aligns the tooltip with the child widget. Other options are TooltipHorizontalPosition.LEFT. TooltipHorizontalPosition.RIGHT or TooltipHorizontalPosition.CENTER


Displaying Tooltips #

This can be done in three ways;

  • You can get access to the controller from sub widgets in the same context.

    OverlayTooltipScaffold.of(context)?.controller;
    
  • Manually start the tooltips in any function by calling the start method, or pass a displayIndex to the start method indicating where to begin.

    _controller.start(); // starts tooltip display from the beginning
    _controller.start(1);// starts tooltip display from displayIndex of 1
    
  • Or Use the startWhen method to start the tooltips display automatically whenever a condition is met. This takes in a Future bool function with an initializedWidgetLength parameter denoting the length of tooltips widget that have been initialized.

     _controller.startWhen( (initializedWidgetLength) async {
            //await any function and return a bool value when done.
          await Future.delayed(const Duration(milliseconds: 500));
          return initializedWidgetLength == 2 && !done;
        });
    
  • Or Add the startWhen parameter to the OverlayTooltipScaffold to also start the tooltips display automatically when a condition is met.

    return OverlayTooltipScaffold(
        ...
         startWhen: (initializedWidgetLength) async{
            await Future.delayed(const Duration(milliseconds: 500));
            return initializedWidgetLength == 2 && !done;
          },
          ...
          child: Scaffold(
             ...
          )
        );
    

Other methods on the TooltipController #

MethodTypeDescription
dismiss()voidDismiss overlay
next()voidMoving to next tooltip
previous()voidMoving to previous tooltip
pause()voidPause tooltip display without triggering onDone method
nextPlayIndexintGet index of current tooltip
playWidgetLengthintGet total length of tooltips to be displayed

Check example project for usage and/or clarifications.

Getting Started #

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

73
likes
100
pub points
88%
popularity

Publisher

unverified uploader

An overlay tooltip handler for onboarding

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on overlay_tooltip