flutter_animated_border_card 0.0.2

A Flutter package for creating beautiful animated gradient borders around widgets with customizable colors, blur effects, and animations.

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

The package provides two main widgets: GradientAnimatedBorder and SingleColorAnimatedBorder.

Gradient Animated Border

GradientAnimatedBorder creates a container with an animated gradient border effect.

import 'package:flutter_animated_border_card/flutter_animated_border_card.dart';

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: Center(
    child: Text('Gradient Border Example'),
  ),
)

Single Color Animated Border

SingleColorAnimatedBorder creates a container with a rotating single-color border effect.

import 'package:flutter_animated_border_card/flutter_animated_border_card.dart';

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: Center(
    child: Text('Single Color Border Example'),
  ),
)

Complete Example

Here's a complete example showing both widgets in action:

import 'package:flutter/material.dart';
import 'package:flutter_animated_border_card/flutter_animated_border_card.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GradientAnimatedBorder(
                width: 300,
                height: 200,
                colors: [Colors.blue, Colors.purple, Colors.red, Colors.blue],
                child: Center(child: Text('Gradient Border')),
              ),
              SizedBox(height: 20),
              SingleColorAnimatedBorder(
                width: 300,
                height: 200,
                color: Colors.purple,
                child: Center(child: Text('Single Color Border')),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

API Reference

GradientAnimatedBorder

Parameter	Type	Default	Description
child	Widget	required	The widget to display inside the border
colors	List	required	List of colors for the gradient animation
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

SingleColorAnimatedBorder

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. Please ensure that you:

1. Add appropriate dartdoc comments for any new public APIs
2. Include examples for new features
3. Format your code using dart format
4. Add tests for new functionality

License

This project is licensed under the MIT License - see the LICENSE file for details