barrier_around 1.0.1
barrier_around: ^1.0.1 copied to clipboard
A Flutter package that creates a completely customizable barrier around any widget, no matter where it is.
Barrier Around #
A Flutter package that creates a barrier around any widget, no matter where it is.
What problem does it solve? #
Sometimes we need to highlight or showcase a specific widget, that's an easy task if the widget is a direct child of a Stack, but what if we want to create a barrier around a specific widget, which is inside, for example, a Column. We can try to calculate positions and sizes, but that can get really messy, really fast.
Usage #
To use this plugin, add barrier_around
as a dependency in your pubspec.yaml file.
Example #
Create a GlobalKey in order to identify which widget you want to create the barrier around.
final GlobalKey _barrierKey = GlobalKey();
Wrap the widget you want to create the barrier around, and wrap it with a BarrierAround
widget.
Assign the GlobalKey to the BarrierAround
widget.
BarrierAround(
key: _barrierKey,
child: yourWidget
)
Whenever you want to show the barrier, just call:
BarrierAroundManager.showBarrier(_barrierKey);
To dismiss the barrier, just tap on it, this behavior is enabled by default. If you want the barrier to not dismiss on tap, you can set dismissOnBarrierTap
to false
in the BarrierAround
widget.
If you want to dismiss the barrier from other place, just call:
BarrierAroundManager.dismissBarrier(_barrierKey);
Barrier customization #
Name | Type | Description | Default |
---|---|---|---|
barrierBorderRadius | BorderRadius? |
If your widget has a border radius, this is the place to put it | null |
barrierColor | Color |
Color of the barrier | Colors.black45 |
barrierOpacity | double |
Barrier opacity | 0.75 |
barrierBlur | double? |
Barrier blur sigmaX and sigmaY | null |
targetPadding | EdgeInsets |
Padding around target widget | EdgeInsets.zero |
onBarrierTap | VoidCallback? |
Callback for the tap event on the barrier | null |
dismissOnBarrierTap | bool |
If barrier must dismiss when user taps on it | true |
animateBarrier | bool |
If show/dismiss of the barrier is animated | true |
animationDuration | Duration |
If animateBarrier is true , you can specify here the duration of the animation |
Duration(milliseconds: 150) |
Suggestions and contributions #
If you have any suggestion around code improvement, bug fixes, new features, or you want to contribute in any way, feel free to raise an issue in Github or DM me in Twitter.