Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added decoration builder #108

Merged
merged 5 commits into from
Aug 19, 2024
Merged

Added decoration builder #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cb11e9e
Added decoration builder
Sourav-Sonkar Jul 18, 2024
ddd0825
moved decoration to Deprecated
Sourav-Sonkar Jul 18, 2024
865793b
removed decoration parameter
Sourav-Sonkar Aug 6, 2024
4f464e3
add documentation for decorationBuilder
Sourav-Sonkar Aug 17, 2024
e4602ca
minor changes
Sourav-Sonkar Aug 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 40 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# super_tooltip
[![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)
[![pub package](https://img.shields.io/pub/v/super_tooltip.svg)](https://pub.dartlang.org/packages/super_tooltip)


`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.
[![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)
[![pub package](https://img.shields.io/pub/v/super_tooltip.svg)](https://pub.dartlang.org/packages/super_tooltip)

`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.

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


## Installing
## 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):

```
Expand All @@ -31,7 +31,8 @@ Now in your Dart code, you can use:
```
import 'package:super_tooltip/super_tooltip.dart';
```
# Getting Started

# 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.

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


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

```dart
Expand Down Expand Up @@ -115,16 +115,38 @@ SuperTooltip(
//....
),
```

Change Popup direction to `TooltipDirection.right`, `TooltipDirection.left`, `TooltipDirection.bottom` and `TooltipDirection.up`

```dart
SuperTooltip(
popupDirection: TooltipDirection.right,
//...
//...
)
```
<img src="https://github.com/bensonarafat/super_tooltip/blob/master/screenshots/screenshot2.png?raw=true" width="250"/>

## Barrier
## DecorationBuilder

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.

```dart
SuperTooltip(
decorationBuilder:(target){
return ShapeDecoration(
//...
shape: CustomShape(
//...
target: target,
),
);
}
//...
)
```


## 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.

Expand All @@ -136,18 +158,20 @@ SuperTooltip(
)
```

## 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`
## 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`

```dart
SuperTooltip(
showBarrier: true,
showDropBoxFilter: true,
sigmaX: 10,
sigmaX: 10,
sigmaY: 10,
//...
)
```

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

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

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
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

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

Create a callback function to dismiss
Create a callback function to dismiss

```dart
Future<bool> _willPopCallback() async {
// If the tooltip is open we don't pop the page on a backbutton press
Expand Down
65 changes: 35 additions & 30 deletions lib/src/super_tooltip.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import 'shape_overlay.dart';
import 'super_tooltip_controller.dart';
import 'tooltip_position_delegate.dart';

typedef DecorationBuilder = Decoration Function(
Offset target,
);

class SuperTooltip extends StatefulWidget {
final Widget content;
final TooltipDirection popupDirection;
Expand All @@ -34,7 +38,7 @@ class SuperTooltip extends StatefulWidget {
final Color borderColor;
final BoxConstraints constraints;
final Color? backgroundColor;
final Decoration? decoration;
final DecorationBuilder? decorationBuilder;
final double elevation;
final Duration fadeInDuration;
final Duration fadeOutDuration;
Expand Down Expand Up @@ -102,7 +106,7 @@ class SuperTooltip extends StatefulWidget {
//
//
//
this.decoration,
this.decorationBuilder,
this.child,
this.borderColor = Colors.black,
this.constraints = const BoxConstraints(
Expand Down Expand Up @@ -400,35 +404,36 @@ class _SuperTooltipState extends State<SuperTooltip>
closeButtonType: closeButtonType,
showCloseButton: showCloseButton,
),
decoration: widget.decoration ??
ShapeDecoration(
color: backgroundColor,
shadows: hasShadow
? widget.boxShadows ??
<BoxShadow>[
BoxShadow(
blurRadius: shadowBlurRadius,
spreadRadius: shadowSpreadRadius,
color: shadowColor,
offset: shadowOffset,
),
]
: null,
shape: BubbleShape(
arrowBaseWidth: widget.arrowBaseWidth,
arrowTipDistance: widget.arrowTipDistance,
borderColor: widget.borderColor,
borderRadius: widget.borderRadius,
borderWidth: widget.borderWidth,
bottom: bottom,
left: left,
preferredDirection: preferredDirection,
right: right,
target: target,
top: top,
bubbleDimensions: widget.bubbleDimensions,
decoration: widget.decorationBuilder != null
? widget.decorationBuilder!(target)
: ShapeDecoration(
color: backgroundColor,
shadows: hasShadow
? widget.boxShadows ??
<BoxShadow>[
BoxShadow(
blurRadius: shadowBlurRadius,
spreadRadius: shadowSpreadRadius,
color: shadowColor,
offset: shadowOffset,
),
]
: null,
shape: BubbleShape(
arrowBaseWidth: widget.arrowBaseWidth,
arrowTipDistance: widget.arrowTipDistance,
borderColor: widget.borderColor,
borderRadius: widget.borderRadius,
borderWidth: widget.borderWidth,
bottom: bottom,
left: left,
preferredDirection: preferredDirection,
right: right,
target: target,
top: top,
bubbleDimensions: widget.bubbleDimensions,
),
),
),
child: widget.content,
),
),
Expand Down
Loading