overlay_tooltip

Description:

overlay tooltip

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:
copied to clipboard
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();
copied to clipboard
This also provides ability to add an onDone method that runs when the tooltips for that controller is completed.
OverlayTooltipScaffold(
overlayColor: Colors.red.withOpacity(.4),
tooltipAnimationCurve: Curves.linear,
tooltipAnimationDuration: const Duration(milliseconds: 1000),
controller: controller,
// if you need to have control over the background overlay for gestures
preferredOverlay: GestureDetector(
onTap: () {
_controller.dismiss();
//move the overlay forward or backwards, or dismiss the overlay
},
child: Container(
height: double.infinity,
width: double.infinity,
color: Colors.blue.withOpacity(.2),
),
),
child: Scaffold(),
);
copied to clipboard

3. Wrap individual widgets to be displayed with an OverlayTooltipItem widget.
OverlayTooltipItem(
displayIndex: 0,
tooltip: (controller) {
return Padding(
padding: const EdgeInsets.only(left: 15),
child: MTooltip(title: 'Some Text Tile', controller: controller),
);
},
child: _sampleWidget(),
);
copied to clipboard
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;
copied to clipboard


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
copied to clipboard


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;
});
copied to clipboard


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(
...
)
);
copied to clipboard



Other methods on the TooltipController #



Method
Type
Description




dismiss()
void
Dismiss overlay


next()
void
Moving to next tooltip


previous()
void
Moving to previous tooltip


pause()
void
Pause tooltip display without triggering onDone method


nextPlayIndex
int
Get index of current tooltip


playWidgetLength
int
Get 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.