Awesome Glass UI

Features

✨ Easy to Use - Simple API with sensible defaults
🎨 Highly Customizable - Control blur, opacity, borders, shadows, and more
🌈 Gradient Support - Use gradients for even more stunning effects
📱 Responsive - Works seamlessly across all screen sizes
⚡ Performance Optimized - Efficient rendering with Flutter's BackdropFilter
🎯 Well Documented - Comprehensive documentation and examples

Installation

Add awesome_glass_ui to your pubspec.yaml:

dependencies:
  awesome_glass_ui: ^0.0.1

Then run:

flutter pub get

Quick Start

import 'package:awesome_glass_ui/awesome_glass_ui.dart';

GlassContainer(
  width: 300,
  height: 200,
  child: Text('Hello, Glass!'),
)

Usage Examples

Basic Usage

GlassContainer(
  child: Column(
    children: [
      Text('Title', style: TextStyle(color: Colors.white)),
      Text('Subtitle', style: TextStyle(color: Colors.white70)),
    ],
  ),
)

Custom Blur and Opacity

GlassContainer(
  blur: 20.0,
  opacity: 0.2,
  child: Text('High blur effect'),
)

Custom Border and Shadow

GlassContainer(
  borderRadius: 25.0,
  borderWidth: 2.0,
  borderColor: Colors.white.withOpacity(0.3),
  shadowBlurRadius: 30.0,
  child: Text('Custom styling'),
)

With Gradient Background

GlassContainer(
  blur: 15.0,
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Colors.white.withOpacity(0.2),
      Colors.white.withOpacity(0.1),
    ],
  ),
  child: Text('Gradient glass'),
)

Full-Width Container

GlassContainer(
  width: double.infinity,
  padding: EdgeInsets.all(20),
  child: YourContent(),
)

Glass Buttons

GlassContainer(
  borderRadius: 30.0,
  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  child: Text('Glass Button', style: TextStyle(color: Colors.white)),
)

API Reference

GlassContainer

A customizable container widget that creates a glassmorphism effect.

Properties

Property	Type	Default	Description
`child`	`Widget?`	`null`	The child widget to display inside the container
`width`	`double?`	`null`	The width of the container
`height`	`double?`	`null`	The height of the container
`blur`	`double`	`10.0`	The blur intensity (sigmaX and sigmaY)
`opacity`	`double`	`0.1`	The opacity of the background (0.0 - 1.0)
`borderRadius`	`double`	`15.0`	The border radius of the container
`borderWidth`	`double`	`1.5`	The border width
`borderColor`	`Color`	`Color.fromRGBO(255, 255, 255, 0.2)`	The border color
`backgroundColor`	`Color?`	`null`	Custom background color (overrides default)
`gradient`	`Gradient?`	`null`	Gradient for background (overrides backgroundColor)
`shadowColor`	`Color`	`Color.fromRGBO(0, 0, 0, 0.1)`	The shadow color
`shadowOffset`	`Offset`	`Offset(0, 4)`	The shadow offset
`shadowBlurRadius`	`double`	`20.0`	The shadow blur radius
`shadowSpreadRadius`	`double`	`0.0`	The shadow spread radius
`padding`	`EdgeInsetsGeometry`	`EdgeInsets.all(20.0)`	The padding inside the container
`margin`	`EdgeInsetsGeometry`	`EdgeInsets.zero`	The margin around the container

Best Practices

Background Matters: Glassmorphism works best over colorful or textured backgrounds. Use gradients or images for best results.
Contrast: Ensure text inside glass containers has sufficient contrast. Use white or light-colored text on dark backgrounds.
Performance: Higher blur values can impact performance. Use values between 5-20 for optimal balance.
Layering: Combine multiple glass containers with different opacities for depth.
Accessibility: Ensure your glass effects don't compromise readability and accessibility.

Example App

Check out the example/ directory for a complete demo app showcasing various glass container configurations.

Run the example:

cd example
flutter run

Contributing

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

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

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

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Acknowledgments

Inspired by modern glassmorphism design trends
Built with Flutter's powerful BackdropFilter widget

Made with ❤️ for the Flutter community