Update add dropBoxFilter

CHANGELOG.md

@@ -1,4 +1,6 @@
 
+# [2.0.5] - 10.08.2023
+* Feature - add blur (imageFilter)
 # [2.0.4] - 28.06.2023
 
 # [2.0.3] - 23.06.2023

README.md

@@ -133,6 +133,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`
+
+```dart
+SuperTooltip(
+    showBarrier: true,
+    showDropBoxFilter: true,
+    sigmaX: 10, 
+    sigmaY: 10,
+    //...
+)
+```
+<img src="https://github.com/escamoteur/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.
 
 ```dart

example/lib/main.dart

@@ -30,9 +30,11 @@ class ExamplePage extends StatefulWidget {
 class _ExamplePageState extends State<ExamplePage> {
   @override
   Widget build(BuildContext context) {
-    return const Scaffold(
+    return Scaffold(
       backgroundColor: Colors.white,
-      body: Center(child: TargetWidget()),
+      body: Center(
+        child: TargetWidget(),
+      ),
     );
   }
 }

lib/src/super_tooltip.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 import 'package:super_tooltip/src/utils.dart';
 
@@ -8,7 +10,51 @@ import 'super_tooltip_controller.dart';
 import 'tooltip_position_delegate.dart';
 
 class SuperTooltip extends StatefulWidget {
-  const SuperTooltip({
+  final Widget content;
+  final TooltipDirection popupDirection;
+  final SuperTooltipController? controller;
+  final void Function()? onLongPress;
+  final void Function()? onShow;
+  final void Function()? onHide;
+  final bool snapsFarAwayVertically;
+  final bool snapsFarAwayHorizontally;
+  final bool? hasShadow;
+  final Color? shadowColor;
+  final double? shadowBlurRadius;
+  final double? shadowSpreadRadius;
+  final double? top, right, bottom, left;
+  final ShowCloseButton? showCloseButton;
+  final Color? closeButtonColor;
+  final double? closeButtonSize;
+  final double minimumOutsideMargin;
+  final double verticalOffset;
+  final Widget? child;
+  final Color borderColor;
+  final BoxConstraints constraints;
+  final Color? backgroundColor;
+  final Decoration? decoration;
+  final double elevation;
+  final Duration fadeInDuration;
+  final Duration fadeOutDuration;
+  final double arrowLength;
+  final double arrowBaseWidth;
+  final double arrowTipDistance;
+  final double borderRadius;
+  final double borderWidth;
+  final bool? showBarrier;
+  final Color? barrierColor;
+  final Rect? touchThrougArea;
+  final ClipAreaShape touchThroughAreaShape;
+  final double touchThroughAreaCornerRadius;
+  final EdgeInsetsGeometry overlayDimensions;
+  final EdgeInsetsGeometry bubbleDimensions;
+
+  //filter
+  final bool showDropBoxFilter;
+  final double sigmaX;
+  final double sigmaY;
+
+  SuperTooltip({
     Key? key,
     required this.content,
     this.popupDirection = TooltipDirection.down,
@@ -61,52 +107,17 @@ class SuperTooltip extends StatefulWidget {
     this.borderRadius = 10.0,
     this.overlayDimensions = const EdgeInsets.all(10),
     this.bubbleDimensions = const EdgeInsets.all(10),
-  }) : super(key: key);
+    this.sigmaX = 5.0,
+    this.sigmaY = 5.0,
+    this.showDropBoxFilter = false,
+  })  : assert(showDropBoxFilter ? showBarrier ?? false : true),
+        super(key: key);
 
   static Key insideCloseButtonKey = const Key("InsideCloseButtonKey");
   static Key outsideCloseButtonKey = const Key("OutsideCloseButtonKey");
   static Key barrierKey = const Key("barrierKey");
   static Key bubbleKey = const Key("bubbleKey");
 
-  final Widget content;
-  final TooltipDirection popupDirection;
-  final SuperTooltipController? controller;
-  final void Function()? onLongPress;
-  final void Function()? onShow;
-  final void Function()? onHide;
-  final bool snapsFarAwayVertically;
-  final bool snapsFarAwayHorizontally;
-  final bool? hasShadow;
-  final Color? shadowColor;
-  final double? shadowBlurRadius;
-  final double? shadowSpreadRadius;
-  final double? top, right, bottom, left;
-  final ShowCloseButton? showCloseButton;
-  final Color? closeButtonColor;
-  final double? closeButtonSize;
-  final double minimumOutsideMargin;
-  final double verticalOffset;
-  final Widget? child;
-  final Color borderColor;
-  final BoxConstraints constraints;
-  final Color? backgroundColor;
-  final Decoration? decoration;
-  final double elevation;
-  final Duration fadeInDuration;
-  final Duration fadeOutDuration;
-  final double arrowLength;
-  final double arrowBaseWidth;
-  final double arrowTipDistance;
-  final double borderRadius;
-  final double borderWidth;
-  final bool? showBarrier;
-  final Color? barrierColor;
-  final Rect? touchThrougArea;
-  final ClipAreaShape touchThroughAreaShape;
-  final double touchThroughAreaCornerRadius;
-  final EdgeInsetsGeometry overlayDimensions;
-  final EdgeInsetsGeometry bubbleDimensions;
-
   @override
   State createState() => _SuperTooltipState();
 }
@@ -118,6 +129,7 @@ class _SuperTooltipState extends State<SuperTooltip>
   SuperTooltipController? _superTooltipController;
   OverlayEntry? _entry;
   OverlayEntry? _barrierEntry;
+  OverlayEntry? blur;
 
   ShowCloseButton? showCloseButton;
   Color? closeButtonColor;
@@ -128,6 +140,7 @@ class _SuperTooltipState extends State<SuperTooltip>
   late Color shadowColor;
   late double shadowBlurRadius;
   late double shadowSpreadRadius;
+  late bool showBlur;
 
   @override
   void initState() {
@@ -173,6 +186,7 @@ class _SuperTooltipState extends State<SuperTooltip>
     shadowColor = widget.shadowColor ?? Colors.black54;
     shadowBlurRadius = widget.shadowBlurRadius ?? 10.0;
     shadowSpreadRadius = widget.shadowSpreadRadius ?? 5.0;
+    showBlur = widget.showDropBoxFilter;
 
     return CompositedTransformTarget(
       link: _layerLink,
@@ -199,6 +213,7 @@ class _SuperTooltipState extends State<SuperTooltip>
     final renderBox = context.findRenderObject() as RenderBox;
     final overlay =
         Overlay.of(context).context.findRenderObject() as RenderBox?;
+
     final size = renderBox.size;
     final target = renderBox.localToGlobal(size.center(Offset.zero));
     final animation = CurvedAnimation(
@@ -266,6 +281,23 @@ class _SuperTooltipState extends State<SuperTooltip>
           )
         : null;
 
+    blur = showBlur
+        ? OverlayEntry(
+            builder: (BuildContext context) => FadeTransition(
+              opacity: animation,
+              child: BackdropFilter(
+                filter: ImageFilter.blur(
+                  sigmaX: widget.sigmaX,
+                  sigmaY: widget.sigmaY,
+                ),
+                child: Container(
+                  width: double.infinity,
+                  height: double.infinity,
+                ),
+              ),
+            ),
+          )
+        : null;
     _entry = OverlayEntry(
       builder: (BuildContext context) => FadeTransition(
         opacity: animation,
@@ -349,6 +381,7 @@ class _SuperTooltipState extends State<SuperTooltip>
     );
 
     Overlay.of(context).insertAll([
+      if (showBlur) blur!,
       if (showBarrier) _barrierEntry!,
       _entry!,
     ]);

pubspec.yaml

@@ -1,6 +1,6 @@
 name: super_tooltip
 description: Super flexible Tooltip class that gets opend in the screens overlay
-version: 2.0.4
+version: 2.0.5
 homepage: https://github.com/escamoteur/super_tooltip