Animated Gradient Background

A beautiful animated gradient background widget for Flutter with customizable colors, animation speed, and gradient patterns.

Features

• 🎨 Multiple Gradient Types: Linear, Radial, and Sweep gradients
• 🌈 Predefined Color Schemes: Beautiful preset color combinations
• ⚡ Smooth Animations: Customizable animation duration and curves
• 🎛️ Highly Customizable: Control every aspect of the gradient
• 📱 Flutter 3.7+ Compatible: Works with the latest Flutter versions
• 🧪 Well Tested: Comprehensive test coverage

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  animated_gradient_background: ^1.0.0

Then run:

flutter pub get

Quick Start

import 'package:animated_gradient_background/animated_gradient_background.dart';

// Basic usage
AnimatedGradientBackground(
  colors: [Colors.red, Colors.blue],
  child: YourWidget(),
)

// With predefined colors
AnimatedGradientBackground(
  colors: GradientPresets.sunset,
  child: YourWidget(),
)

Examples

Basic Linear Gradient

AnimatedGradientBackground(
  colors: [Colors.purple, Colors.blue],
  child: Center(
    child: Text(
      'Hello World!',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
)

Radial Gradient with Custom Settings

AnimatedGradientBackground(
  colors: GradientPresets.aurora,
  gradientType: GradientType.radial,
  radialCenter: Alignment.center,
  radialRadius: 0.8,
  duration: Duration(seconds: 2),
  child: YourWidget(),
)

Sweep Gradient

AnimatedGradientBackground(
  colors: [Colors.red, Colors.yellow, Colors.green, Colors.blue],
  gradientType: GradientType.sweep,
  sweepCenter: Alignment.center,
  sweepStartAngle: 0.0,
  sweepEndAngle: 2 * 3.14159,
  child: YourWidget(),
)

Custom Linear Direction

AnimatedGradientBackground(
  colors: GradientPresets.tropical,
  gradientType: GradientType.linear,
  linearDirection: LinearGradientDirection.topToBottom,
  duration: Duration(seconds: 4),
  repeat: true,
  curve: Curves.easeInOut,
  child: YourWidget(),
)

API Reference

AnimatedGradientBackground

Parameter	Type	Default	Description
child	Widget	Required	The widget to display on top of the gradient
colors	List<Color>	Required	List of colors for the gradient (minimum 2)
duration	Duration	Duration(seconds: 3)	Animation duration
gradientType	GradientType	GradientType.linear	Type of gradient
linearDirection	LinearGradientDirection?	topLeftToBottomRight	Direction for linear gradients
radialCenter	Alignment?	Alignment.center	Center for radial gradients
radialRadius	double?	0.8	Radius for radial gradients
sweepCenter	Alignment?	Alignment.center	Center for sweep gradients
sweepStartAngle	double?	0.0	Start angle for sweep gradients
sweepEndAngle	double?	2 * π	End angle for sweep gradients
repeat	bool	true	Whether to repeat the animation
curve	Curve	Curves.easeInOut	Animation curve

GradientType

• linear - Linear gradient
• radial - Radial gradient
• sweep - Sweep gradient

LinearGradientDirection

• topLeftToBottomRight - Top-left to bottom-right
• topRightToBottomLeft - Top-right to bottom-left
• topToBottom - Top to bottom
• bottomToTop - Bottom to top
• leftToRight - Left to right
• rightToLeft - Right to left

GradientPresets

Predefined color schemes for quick use:

• GradientPresets.sunset - Warm sunset colors
• GradientPresets.ocean - Cool ocean blues
• GradientPresets.forest - Natural forest greens
• GradientPresets.aurora - Northern lights colors
• GradientPresets.fire - Hot fire colors
• GradientPresets.purpleDream - Purple dream colors
• GradientPresets.tropical - Tropical paradise colors
• GradientPresets.midnight - Dark midnight colors

Advanced Usage

Custom Animation Control

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isAnimating = true;

  @override
  Widget build(BuildContext context) {
    return AnimatedGradientBackground(
      colors: GradientPresets.aurora,
      repeat: _isAnimating,
      child: Column(
        children: [
          Text('Animated Background'),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _isAnimating = !_isAnimating;
              });
            },
            child: Text(_isAnimating ? 'Stop' : 'Start'),
          ),
        ],
      ),
    );
  }
}

Multiple Color Animation

AnimatedGradientBackground(
  colors: [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.purple,
  ],
  duration: Duration(seconds: 5),
  child: YourWidget(),
)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Changelog

See CHANGELOG.md for a list of changes.

Support

If you like this package, please give it a ⭐ on pub.dev!

Issues

Found a bug or have a feature request? Please open an issue on GitHub.