Skip to content

Commit 16776cd

Browse files
RotRot-piRotRot-pi
authored
Merge branch 'master' into resolve-conflicts
2 parents 3f3331b + b637f1f commit 16776cd

File tree

2 files changed

+87
-50
lines changed

2 files changed

+87
-50
lines changed

‎README.md

+40-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
# super_tooltip
2-
[![Static code analysis](https://github.com/bensonarafat/super_tooltip/actions/workflows/dart.yml/badge.svg)](https://github.com/bensonarafat/super_tooltip/actions/workflows/dart.yml)
3-
[![pub package](https://img.shields.io/pub/v/super_tooltip.svg)](https://pub.dartlang.org/packages/super_tooltip)
4-
52

6-
`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.
3+
[![Static code analysis](https://github.com/bensonarafat/super_tooltip/actions/workflows/dart.yml/badge.svg)](https://github.com/bensonarafat/super_tooltip/actions/workflows/dart.yml)
4+
[![pub package](https://img.shields.io/pub/v/super_tooltip.svg)](https://pub.dartlang.org/packages/super_tooltip)
75

6+
`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.
87

98
<img src="https://github.com/bensonarafat/super_tooltip/blob/master/screenshots/screenshot1.gif?raw=true" width="250"/>
109

11-
12-
## Installing
10+
## Installing
1311

1412
Run this command:
1513

1614
With Flutter:
15+
1716
```
1817
flutter pub add super_tooltip
1918
```
19+
2020
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
2121

2222
```
@@ -31,7 +31,8 @@ Now in your Dart code, you can use:
3131
```
3232
import 'package:super_tooltip/super_tooltip.dart';
3333
```
34-
# Getting Started
34+
35+
# Getting Started
3536

3637
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.
3738

@@ -48,7 +49,6 @@ You have to make your Widget a `StatefulWidget` and you just need to create a co
4849
}
4950
```
5051

51-
5252
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
5353

5454
```dart
@@ -115,16 +115,38 @@ SuperTooltip(
115115
//....
116116
),
117117
```
118+
118119
Change Popup direction to `TooltipDirection.right`, `TooltipDirection.left`, `TooltipDirection.bottom` and `TooltipDirection.up`
120+
119121
```dart
120122
SuperTooltip(
121123
popupDirection: TooltipDirection.right,
122-
//...
124+
//...
123125
)
124126
```
125127
<img src="https://github.com/bensonarafat/super_tooltip/blob/master/screenshots/screenshot2.png?raw=true" width="250"/>
126128

127-
## Barrier
129+
## DecorationBuilder
130+
131+
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.
132+
133+
```dart
134+
SuperTooltip(
135+
decorationBuilder:(target){
136+
return ShapeDecoration(
137+
//...
138+
shape: CustomShape(
139+
//...
140+
target: target,
141+
),
142+
);
143+
}
144+
//...
145+
)
146+
```
147+
148+
149+
## Barrier
128150

129151
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.
130152

@@ -136,18 +158,20 @@ SuperTooltip(
136158
)
137159
```
138160

139-
## Blur
140-
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`
161+
## Blur
162+
163+
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`
141164

142165
```dart
143166
SuperTooltip(
144167
showBarrier: true,
145168
showDropBoxFilter: true,
146-
sigmaX: 10,
169+
sigmaX: 10,
147170
sigmaY: 10,
148171
//...
149172
)
150173
```
174+
151175
<img src="https://github.com/bensonarafat/super_tooltip/blob/master/screenshots/screenshot3.gif?raw=true" width="250"/>
152176

153177
If you'd like to simply react to open or close states, you can pass through `onHide` or `onShow` callbacks to the default constructor.
@@ -163,7 +187,7 @@ SuperTooltip(
163187
),
164188
```
165189

166-
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
190+
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
167191

168192
```dart
169193
return WillPopScope(
@@ -177,7 +201,8 @@ To hide the tooltip when the user tap the back button. Wrap your `GestureDetecto
177201
);
178202
```
179203

180-
Create a callback function to dismiss
204+
Create a callback function to dismiss
205+
181206
```dart
182207
Future<bool> _willPopCallback() async {
183208
// If the tooltip is open we don't pop the page on a backbutton press

‎lib/src/super_tooltip.dart

+47-35
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import 'shape_overlay.dart';
1111
import 'super_tooltip_controller.dart';
1212
import 'tooltip_position_delegate.dart';
1313

14+
typedef DecorationBuilder = Decoration Function(
15+
Offset target,
16+
);
17+
1418
/// A powerful and customizable tooltip widget for Flutter.
1519
///
1620
/// `SuperTooltip` provides a flexible and feature-rich way to display tooltips
@@ -51,6 +55,7 @@ import 'tooltip_position_delegate.dart';
5155
/// ),
5256
/// )
5357
/// ```
58+
5459
class SuperTooltip extends StatefulWidget {
5560
// Creates a `SuperTooltip` widget.
5661
///
@@ -191,7 +196,9 @@ class SuperTooltip extends StatefulWidget {
191196
///
192197
/// If not provided, the default decoration will be used.
193198
final Decoration? decoration;
194-
199+
200+
final DecorationBuilder? decorationBuilder;
201+
195202
/// The elevation of the tooltip.
196203
///
197204
/// Defaults to `0.0`.
@@ -283,6 +290,7 @@ class SuperTooltip extends StatefulWidget {
283290
///
284291
/// Defaults to `false`.
285292
final bool toggleOnTap;
293+
final bool showOnTap;
286294

287295
/// Whether to show a blur filter behind the tooltip.
288296
///
@@ -344,7 +352,7 @@ class SuperTooltip extends StatefulWidget {
344352
//
345353
//
346354
//
347-
this.decoration,
355+
this.decorationBuilder,
348356
this.child,
349357
this.borderColor = Colors.black,
350358
this.constraints = const BoxConstraints(
@@ -371,6 +379,7 @@ class SuperTooltip extends StatefulWidget {
371379
this.showDropBoxFilter = false,
372380
this.hideTooltipOnBarrierTap = true,
373381
this.toggleOnTap = false,
382+
this.showOnTap = true,
374383
this.boxShadows,
375384
}) : assert(showDropBoxFilter ? showBarrier ?? false : true,
376385
'showDropBoxFilter or showBarrier can\'t be false | null'),
@@ -466,11 +475,13 @@ class _SuperTooltipState extends State<SuperTooltip>
466475
link: _layerLink,
467476
child: GestureDetector(
468477
onTap: () {
469-
if (widget.toggleOnTap && _superTooltipController!.isVisible) {
470-
_superTooltipController!.hideTooltip();
471-
} else {
472-
_superTooltipController!.showTooltip();
473-
}
478+
if (widget.toggleOnTap && _superTooltipController!.isVisible) {
479+
_superTooltipController!.hideTooltip();
480+
} else {
481+
if (widget.showOnTap) {
482+
_superTooltipController!.showTooltip();
483+
}
484+
}
474485
},
475486
onLongPress: widget.onLongPress,
476487
child: widget.child,
@@ -668,35 +679,36 @@ class _SuperTooltipState extends State<SuperTooltip>
668679
closeButtonType: closeButtonType,
669680
showCloseButton: showCloseButton,
670681
),
671-
decoration: widget.decoration ??
672-
ShapeDecoration(
673-
color: backgroundColor,
674-
shadows: hasShadow
675-
? widget.boxShadows ??
676-
<BoxShadow>[
677-
BoxShadow(
678-
blurRadius: shadowBlurRadius,
679-
spreadRadius: shadowSpreadRadius,
680-
color: shadowColor,
681-
offset: shadowOffset,
682-
),
683-
]
684-
: null,
685-
shape: BubbleShape(
686-
arrowBaseWidth: widget.arrowBaseWidth,
687-
arrowTipDistance: widget.arrowTipDistance,
688-
borderColor: widget.borderColor,
689-
borderRadius: widget.borderRadius,
690-
borderWidth: widget.borderWidth,
691-
bottom: bottom,
692-
left: left,
693-
preferredDirection: preferredDirection,
694-
right: right,
695-
target: target,
696-
top: top,
697-
bubbleDimensions: widget.bubbleDimensions,
682+
decoration: widget.decorationBuilder != null
683+
? widget.decorationBuilder!(target)
684+
: ShapeDecoration(
685+
color: backgroundColor,
686+
shadows: hasShadow
687+
? widget.boxShadows ??
688+
<BoxShadow>[
689+
BoxShadow(
690+
blurRadius: shadowBlurRadius,
691+
spreadRadius: shadowSpreadRadius,
692+
color: shadowColor,
693+
offset: shadowOffset,
694+
),
695+
]
696+
: null,
697+
shape: BubbleShape(
698+
arrowBaseWidth: widget.arrowBaseWidth,
699+
arrowTipDistance: widget.arrowTipDistance,
700+
borderColor: widget.borderColor,
701+
borderRadius: widget.borderRadius,
702+
borderWidth: widget.borderWidth,
703+
bottom: bottom,
704+
left: left,
705+
preferredDirection: preferredDirection,
706+
right: right,
707+
target: target,
708+
top: top,
709+
bubbleDimensions: widget.bubbleDimensions,
710+
),
698711
),
699-
),
700712
child: widget.content,
701713
),
702714
),

0 commit comments

Comments
 (0)