gradient_containers_plus

Overview

A Flutter package that provides beautiful and customizable gradient container templates for your Flutter applications. This package offers pre-designed container widgets with various gradient styles, shadows, and rounded corners to enhance your app's visual appeal. Now with advanced features like animated color changes, rotating gradient borders, ambient light effects, and interactive containers! Each section includes animated GIF demos so you can see the effects in action at a glance.

Installation

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

dependencies:
  gradient_containers_plus: ^1.1.2

Usage Examples

1. Basic Gradient Containers

Vertical Gradient Container

VerticalGradientContainer(
  height: 150,
  colors: const [Colors.blue, Colors.purple],
  child: const Center(
    child: Text('Vertical Gradient'),
  ),
)

Radial Gradient Container

RadialGradientContainer(
  height: 150,
  colors: const [Colors.orange, Colors.red],
  radius: 0.85,
  child: const Center(
    child: Text('Radial Gradient'),
  ),
)

2. Animated Effects

Animated Gradient Container

AnimatedGradientContainer(
  height: 150,
  colors: const [
    Colors.purple,
    Colors.blue,
    Colors.purple
  ],
  duration: const Duration(seconds: 2),
  child: const Center(
    child: Text('Animated Gradient'),
  ),
)

Color Change Gradient (NEW!)

AnimatedColorChangeContainer(
  height: 150,
  colorSets: [
    [Colors.blue, Colors.purple],
    [Colors.red, Colors.orange],
    [Colors.green, Colors.yellow],
  ],
  duration: const Duration(seconds: 3),
  curve: Curves.easeInOut,
  child: const Center(
    child: Text('Color Change Effect'),
  ),
)

3. Special Effects

Glassmorphic Gradient Container

GlassmorphicGradientContainer(
  height: 150,
  colors: const [Colors.white, Colors.white],
  blurSigma: 10,
  borderWidth: 1,
  child: const Center(
    child: Text('Glassmorphic Effect'),
  ),
)

Neon Gradient Container

NeonGradientContainer(
  height: 150,
  colors: const [
    Color(0xFF00FF87),
    Color(0xFF60EFFF)
  ],
  glowIntensity: 0.5,
  glowSpread: 2,
  child: const Center(
    child: Text('Neon Glow'),
  ),
)

4. Interactive Effects

Liquid Press Effects (NEW!)

LiquidPressContainer(
  height: 100,
  colors: const [Colors.purple, Colors.deepPurple],
  curve: Curves.easeInOutBack,
  animationDuration: const Duration(milliseconds: 800),
  child: const Center(
    child: Text('Press Me!', style: TextStyle(color: Colors.white)),
  ),
)

Interactive Containers (NEW!)

LinearGradientContainer(
  height: 100,
  colors: const [Colors.green, Colors.teal],
  onTap: () {
    debugPrint('Container tapped!');
  },
  child: const Center(
    child: Text('Tap Me!', style: TextStyle(color: Colors.white)),
  ),
)

5. Ambient Light Effects (NEW!)

AmbientLightContainer(
  height: 120,
  colors: const [Color(0xFFFF69B4), Color(0xFF8A2BE2)],
  ambientIntensity: 1,
  spreadRadius: 7,
  blurRadius: 0,
  showSharpBorder: true,
  child: const Center(
    child: Text('Ambient Light Effect'),
  ),
)

6. Rotating Border Effects (NEW!)

AmbientLightContainer(
  height: 150,
  colors: const [Colors.cyan, Colors.blue, Colors.purple],
  ambientIntensity: 0.8,
  spreadRadius: 5.0,
  blurRadius: 0.0,
  showSharpBorder: true,
  glowWidthMultiplier: 3.0,
  animationDuration: const Duration(seconds: 3),
  child: const Center(
    child: Text('Rotating Border'),
  ),
)

7. Different Shapes (NEW!)

// Circular container
LinearGradientContainer(
  height: 150,
  shape: BoxShape.circle,
  colors: const [Colors.blue, Colors.purple],
  child: const Center(
    child: Text('Circle', style: TextStyle(color: Colors.white)),
  ),
)

// Rounded container
LinearGradientContainer(
  height: 150,
  borderRadius: BorderRadius.circular(75),
  colors: const [Colors.orange, Colors.red],
  child: const Center(
    child: Text('Rounded', style: TextStyle(color: Colors.white)),
  ),
)

8. Preset Gradients (NEW!)

// Using preset gradients
LinearGradientContainer(
  height: 150,
  colors: GradientPresets.sunset,
  child: const Center(
    child: Text('Sunset Preset', style: TextStyle(color: Colors.white)),
  ),
)

// Ocean Blue preset
LinearGradientContainer(
  height: 150,
  colors: GradientPresets.oceanBlue,
  child: const Center(
    child: Text('Ocean Blue Preset', style: TextStyle(color: Colors.white)),
  ),
)

Features

🎬 GIF Demos

Watch animated features in action! Each section includes an animated GIF demo.

✨ Multiple pre-designed gradient container templates:

• 🎨 Vertical & Linear Gradient Containers with customizable colors and direction
• 🔄 Radial Gradient Container with adjustable radius and center point
• 🌈 Sweep Gradient Container with configurable start and end angles
• ✨ Animated Gradient Container with smooth color transitions
• 🌟 Glassmorphic Gradient Container with blur and transparency effects
• 💫 Neon Gradient Container with customizable glow effects
• 🔄 Animated Color Change Container with smooth transitions between color sets
• 💧 Liquid Press Container with interactive spring animation effects
• 🌈 Ambient Light Container with customizable glow and rotating border effects
• 🔄 Mesh Gradient Container for beautiful color mesh effects

🎯 Advanced Features:

• ✨ Rotating gradient borders with customizable animation speed
• 🔌 Interactive containers with tap, hover, and custom cursor support
• 🌟 Ambient light effects with customizable glow and intensity
• 🎭 Multiple shape options: circle, rectangle, and custom border radius
• 🎨 Ready-to-use preset gradients for quick implementation
• 💧 Spring-based liquid press animations for tactile feedback

🛠️ Core Features:

• 📱 Responsive design with flexible width and height
• 🎨 Customizable borders, shadows, and corner radius
• 🔌 Easy integration with any Flutter widget
• 📚 Comprehensive documentation and examples
• 💻 Full Platform Support:
  • Android ✓
  • iOS ✓
  • Web ✓
  • Windows ✓
  • macOS ✓
  • Linux ✓

Customization

Each container can be customized with:

• 🎨 Custom colors and gradients
• 🔲 Border radius and width
• 📐 Container dimensions
• 📏 Padding and margin
• ✨ Specific effects (blur, glow, animation duration, rotation speed)
• 🌗 Shadow properties
• 📍 Child widget positioning
• 🔄 Animation properties (duration, curve, pulse scale)
• 💫 Interactive properties (onTap, onHover, mouseCursor)
• 🌈 Ambient light settings (intensity, spread, blur)
• 🎭 Shape options (rectangle, circle, custom border radius)

Documentation

For detailed documentation, please visit our API Reference.

Additional Information

• 📦 Pub.dev Package
• 💻 GitHub Repository
• 🐛 Issue Tracker

Contributing

We welcome contributions! To contribute:

1. 🍴 Fork the repository
2. 🌿 Create your feature branch
3. ✍️ Commit your changes
4. 🚀 Push to the branch
5. 📬 Create a Pull Request

License

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

Contact

• 👨‍💻 Developed by Jam Ali Hassan
• 🌐 Portfolio
• 📧 Email: jamalihassan0307@gmail.com
• 🔗 LinkedIn