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

Libraries

flutter_animated_border_card