gradient_containers_plus #

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.

Features #

• 10 pre-designed gradient container templates
• Multiple gradient types (Linear, Radial, Sweep)
• Advanced effects (Glassmorphic, Neon, 3D, Metallic, Holographic)
• Customizable patterns (dots, lines, grid)
• Animated patterns and shimmer effects
• Responsive design with flexible width
• Easy to integrate and use

Getting started #

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

dependencies:
  gradient_containers_plus: ^0.0.1

Usage #

Import the package in your Dart code:

import 'package:gradient_containers_plus/gradient_containers_plus.dart';

Basic Usage #

Use the GradientContainers widget to display all gradient templates:

const GradientContainers()

Individual Container Usage #

You can also use individual containers by creating custom widgets:

// Example of a custom gradient container
Container(
  width: double.infinity,
  height: 150,
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: const Center(
    child: Text(
      'Custom Gradient',
      style: TextStyle(
        color: Colors.white,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

Available Templates #

1. Vertical Gradient

   • Linear gradient from blue to purple
   • Subtle shadow effect
   • Rounded corners

2. Radial Gradient

   • Radial gradient from orange to red
   • Enhanced shadow effect
   • Rounded corners

3. Sweep Gradient

   • Sweep gradient with green, teal, and blue
   • Pattern overlay
   • Rounded corners

4. Animated Gradient

   • Multi-color gradient with shimmer effect
   • Animated pattern overlay
   • Rounded corners

5. Glassmorphic Effect

   • Transparent gradient with blur effect
   • Subtle border
   • Modern glass-like appearance

6. Neon Glow

   • Bright gradient with glow effect
   • Multiple colored shadows
   • Text shadow for readability

7. Animated Pattern

   • Deep blue gradient background
   • Custom animated pattern overlay
   • Rounded corners

8. 3D Effect

   • Professional color scheme
   • Multiple shadows for depth
   • Text shadow for depth

9. Metallic Effect

   • Grey gradient with shimmer
   • Subtle shadow
   • Shader mask for metallic look

10. Holographic Effect

    • Multiple colored shadows
    • Transparent gradient layers
    • Shimmer effect overlay

Customization #

You can customize the containers by modifying:

• Colors
• Gradient types
• Shadow effects
• Border radius
• Pattern types
• Animation effects

Additional information #

For more information about this package, visit:

• GitHub Repository
• Pub.dev Package

To contribute to this package:

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

For issues and feature requests, please use the GitHub issue tracker.