diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..0f9e55b --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,14 @@ +# These are supported funding model platforms + +github: # [bensonarafat] +patreon: # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry +polar: # Replace with a single Polar username +buy_me_a_coffee: bensonarafat # Replace with a single Buy Me a Coffee username +custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..dd84ea7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: '' +labels: '' +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..bbcbbe7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: '' +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f47ad0..c6ce34f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,9 @@ +# [2.0.8] - 13.07.2024 +- Added toggleOnTap option to toggle tooltip +- Remove un-use method +- Fix showClosButton and hideToolTip on Barrier Tap +- expose showowOffset # [2.0.7] - 28.09.2023 * Fix custom decoration diff --git a/README.md b/README.md index d9d3961..b747c5e 100644 --- a/README.md +++ b/README.md @@ -1,21 +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) - -`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. - -## 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): ``` @@ -30,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. @@ -47,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 @@ -114,16 +115,38 @@ SuperTooltip( //.... ), ``` + Change Popup direction to `TooltipDirection.right`, `TooltipDirection.left`, `TooltipDirection.bottom` and `TooltipDirection.up` + ```dart SuperTooltip( popupDirection: TooltipDirection.right, - //... + //... ) ``` -## 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. @@ -135,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, //... ) ``` + If you'd like to simply react to open or close states, you can pass through `onHide` or `onShow` callbacks to the default constructor. @@ -162,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( @@ -176,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 _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 index 2e0e016..b09fee8 100644 --- 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; @@ -52,11 +56,13 @@ class SuperTooltip extends StatefulWidget { final EdgeInsetsGeometry bubbleDimensions; final bool hideTooltipOnTap; final bool hideTooltipOnBarrierTap; + final bool toggleOnTap; //filter final bool showDropBoxFilter; final double sigmaX; final double sigmaY; + final List? boxShadows; SuperTooltip({ Key? key, @@ -100,7 +106,7 @@ class SuperTooltip extends StatefulWidget { // // // - this.decoration, + this.decorationBuilder, this.child, this.borderColor = Colors.black, this.constraints = const BoxConstraints( @@ -126,6 +132,8 @@ class SuperTooltip extends StatefulWidget { this.sigmaY = 5.0, this.showDropBoxFilter = false, this.hideTooltipOnBarrierTap = true, + this.toggleOnTap = false, + this.boxShadows, }) : assert(showDropBoxFilter ? showBarrier ?? false : true, 'showDropBoxFilter or showBarrier can\'t be false | null'), super(key: key); @@ -212,7 +220,13 @@ class _SuperTooltipState extends State return CompositedTransformTarget( link: _layerLink, child: GestureDetector( - onTap: _superTooltipController!.showTooltip, + onTap: () { + if (widget.toggleOnTap && _superTooltipController!.isVisible) { + _superTooltipController!.hideTooltip(); + } else { + _superTooltipController!.showTooltip(); + } + }, onLongPress: widget.onLongPress, child: widget.child, ), @@ -390,34 +404,36 @@ class _SuperTooltipState extends State closeButtonType: closeButtonType, showCloseButton: showCloseButton, ), - decoration: widget.decoration ?? - ShapeDecoration( - color: backgroundColor, - shadows: hasShadow - ? [ - 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( + 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, ), ), diff --git a/pubspec.yaml b/pubspec.yaml index 65c89b6..08a29ff 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: super_tooltip description: Super flexible Tooltip class that gets opend in the screens overlay -version: 2.0.7 +version: 2.0.8 homepage: https://github.com/bensonarafat/super_tooltip