Merge pull request #108 from Sourav-Sonkar/feat/decoration-builder

Added decoration builder
bensonarafat · Aug 19, 2024 · cc2ee93 · cc2ee93
2 parents 377b7d9 + e4602ca
commit cc2ee93
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -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):
 
 ```
@@ -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.
 
@@ -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
@@ -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.
 
@@ -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.
@@ -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(
@@ -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

diff --git a/lib/src/super_tooltip.dart b/lib/src/super_tooltip.dart
@@ -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;
@@ -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;
@@ -102,7 +106,7 @@ class SuperTooltip extends StatefulWidget {
     //
     //
     //
-    this.decoration,
+    this.decorationBuilder,
     this.child,
     this.borderColor = Colors.black,
     this.constraints = const BoxConstraints(
@@ -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,
                       ),
                     ),