glowy_borders

Description:

glowy borders

This package provides a wrapper widget to animate borders around your widgets.
You can choose to provide current Animation Progress externally or use an indefinitely animation.
| |
Features #
AnimatedGradientBorder Widget #

Wrapper to Animate widgets border with gradients and glow
Set animation progress manually or loop indefinitely
control size of glow, border and colors to achieve stunning effects

Getting started #
Create your flutter app, import this package and use AnimatedGradientBorder to wrap some element.
Usage #
In this example you only need to wrap the widget with a full size Column in your app to see the
results.
Also note the currentProgress variable which is used to set animation state.
If you remove it or set it to null, the animation will play indefinitely.
Please Note that you will need to set the same border radius for the wrapper as well as the child to make it look like a true border.
Also note, that this widget will not work in stretched alignments if you don't provide the parameter stretchAlongAxis and specify which axis you want to stretch along

final widget = Scaffold(
extendBody: true,
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Column(
children: [Text('Hallo Welt')],
),
AnimatedGradientBorder(
borderSize: 2,
glowSize: 10,
gradientColors: [
Colors.transparent,
Colors.transparent,
Colors.transparent,
Colors.purple.shade50
],
animationProgress: currentProgress,
borderRadius: BorderRadius.all(Radius.circular(999)),
child: SizedBox(
width: 300,
height: 300,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(999)),
color: Theme
.of(context)
.colorScheme
.secondaryContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("current value: $currentProgress",
style: TextStyle(color: Colors.white, fontSize: 30.0)),
],
),
),
),
),
],
),
),
),
);
copied to clipboard
Additional information #
This feature uses Backdrop Filter under the hood which can cause performance issues if used
extensively. Keep that in mind.