fl_tooltip

Description:

fl tooltip

FlTooltip #
Flutter package for showing tooltip using Flutter's Overlay widget.
Getting Started #

Add dependency to pubspec.yaml

dependencies:
fl_tooltip: <latest-version>
copied to clipboard

Import the package

import 'package:fl_tooltip/fl_tooltip.dart';
copied to clipboard

Wrap the target widget with FlTooltip

final FlTooltipKey tooltipKey = FlTooltipKey();

FlTooltip(
key: tooltipKey,
options: FlTooltipEntryOptions(
...
),
content: SomeTooltipContent(),
child: SomeWidget(),
)
copied to clipboard

Show the tooltip

void showTooltip() {
tooltipKey.currentState?.showTooltip();
}
copied to clipboard
Creating FlTooltipEntry without FlTooltip #
It's possible to show tooltip without using FlTooltip widget. This is useful when you want to show tooltip directly from a method, for example, tooltip for tutorials.
In order to do that, we just need to wrap the target widget with FlTooltipTarget.
final FlTooltipTargetKey targetKey = FlTooltipTargetKey();

FlTooltipTarget(
key: targetKey, // <- this is required
child: SomeWidget(),
)

FlTooltipOverlayEntry? entry;
void showTooltip() {
entry = FlTooltipEntry.showTooltip({
targetKey: targetKey,
options: FlTooltipEntryOptions(
...
),
});
}

void dismissTooltip() {
entry?.dismiss();
entry = null;
}
copied to clipboard
Customizing FlTooltip Themes #
FlTooltipTheme are customizable via ThemeExtension.
Example:
MaterialApp(
theme: ThemeData(
extensions: <ThemeExtension<dynamic>>[
FlTooltipTheme(
...
),
],
),
)
copied to clipboard