Animated Gradient Border ✨ #

A Simple Flutter package that provides animated gradient borders for widgets with customizable colors, shapes, and animation controls like speed, gradient stops etc.

Installation 💻 #

Just add animated_gradient_border to your pubspec.yaml:

dependencies:
  animated_gradient_border: ^0.1.0

Or install it directly from the command line:

flutter pub add animated_gradient_border

Usage #

Import the package in your Dart file:

import 'package:animated_gradient_border/animated_gradient_border.dart';

Examples #

Basic Usage #

Create a simple animated gradient border around any widget:

// Example 1: Fast, highly customized border
AnimatedGradientBorder(
    borderWidth: 6,
    borderRadius: 25,
    speed: const Duration(milliseconds: 1500), // Faster rotation
    colors: const [
    Color(0xFF00FFFF), // Cyan
    Color(0xFF32CD32), // Lime Green
    Colors.transparent,
    ],
    stops: const [0.0, 0.4, 1.0], // Controls the gradient length
    child: Container(
    width: 250,
    height: 120,
    decoration: BoxDecoration(
        color: Colors.grey[900],
        borderRadius: BorderRadius.circular(25),
    ),
    child: const Center(
        child: Text(
        "High Contrast Glow",
        style: TextStyle(color: Colors.white70, fontSize: 18),
        ),
    ),
    ),
),

// Example 2: Slower, soft white glow (The original request)
AnimatedGradientBorder(
    borderWidth: 3,
    borderRadius: 30,
    speed: const Duration(milliseconds: 3500), // Slower rotation
    // Uses a soft white gradient that fades out quickly
    colors: const [
    Colors.white,
    Colors.transparent,
    Colors.transparent,
    ],
    stops: const [0.0, 0.15, 1.0], // Sharp fade to transparent
    child: ElevatedButton(
    style: ElevatedButton.styleFrom(
        backgroundColor: Colors.black,
        shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30),
        ),
        padding: const EdgeInsets.symmetric(
        horizontal: 40,
        vertical: 20,
        ),
        elevation: 0,
    ),
    onPressed: () {},
    child: const Text("Soft White Line"),
    ),
),

Customization #

To customize the AnimatedGradientBorder we have many options:

Parameters #

The AnimatedGradientBorder widget supports the following customization options:

Running Tests 🧪 #

To run all unit tests, use the following command:

flutter test

License #

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