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:

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.

Libraries

flutter_containers
main