gradient_containers_plus #

Jam Ali Hassan
Flutter Developer

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.

Installation #

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

dependencies:
  gradient_containers_plus: ^1.0.7

Usage Examples #

1. Vertical Gradient Container #

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

2. Radial Gradient Container #

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

3. Sweep Gradient Container #

SweepGradientContainer(
  height: 150,
  colors: const [
    Colors.green,
    Colors.teal,
    Colors.blue
  ],
  startAngle: 0,
  endAngle: 2 * 3.14159,
  child: const Center(
    child: Text('Sweep Gradient'),
  ),
)

4. 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'),
  ),
)

5. Glassmorphic Gradient Container #

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

6. Neon Gradient Container #

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

Features #

✨ 6 pre-designed gradient container templates:

• 🎨 Vertical Gradient Container 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

🎯 Additional 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)
• 🌗 Shadow properties
• 📍 Child widget positioning

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 - see the LICENSE file for details.

Contact #

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