Flutter Animated Border Card
A customizable Flutter package for creating beautiful animated gradient borders around widgets.
Features
- Animated gradient borders with customizable colors
- Single color animated borders with dash patterns
- Adjustable border width and blur effects
- Configurable animation duration
- Customizable border radius
- Support for any child widget
Installation
Add this to your package's pubspec.yaml file:
dependencies:
flutter_animated_border_card: ^1.0.0
Usage
Gradient Animated Border
GradientAnimatedBorder(
width: 300,
height: 200,
colors: [
Colors.red,
Colors.green,
Colors.blue,
Colors.purple,
Colors.red,
],
duration: Duration(seconds: 3),
strokeWidth: 5,
blurRadius: 15,
borderRadius: BorderRadius.circular(10),
showBlur: true,
padding: EdgeInsets.all(32),
child: YourWidget(),
)
Single Color Animated Border
The SingleColorAnimatedBorder widget creates a rotating single-color border effect with customizable properties.
Features
- Rotating single-color border animation
- Customizable color and animation speed
- Adjustable border width and blur effects
- Optional blur effect
- Configurable container size and padding
- Custom background color support
Usage
SingleColorAnimatedBorder(
width: 300,
height: 200,
color: Colors.purple,
duration: Duration(seconds: 3),
strokeWidth: 5,
blurRadius: 15,
borderRadius: BorderRadius.circular(10),
showBlur: true,
padding: EdgeInsets.all(32),
backgroundColor: Color(0xFF1C1F2B),
child: YourWidget(),
)
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| child | Widget | required | The widget to display inside the border |
| color | Color | Colors.purple | The color of the animated border |
| duration | Duration | 3 seconds | Duration of one complete animation cycle |
| strokeWidth | double | 5.0 | Width of the border stroke |
| blurRadius | double | 15.0 | Radius of the blur effect |
| borderRadius | BorderRadius | 10.0 | Border radius of the container |
| showBlur | bool | true | Whether to show the blur effect |
| width | double | 300.0 | Width of the container |
| height | double | 200.0 | Height of the container |
| padding | EdgeInsetsGeometry | 32.0 | Padding around the child widget |
| backgroundColor | Color | 0xFF1C1F2B | Background color of the container |
Contributing
Feel free to contribute to this project by creating issues or submitting pull requests.