Glass UI Widgets for Flutter

Main Glass Image

Glass Button Glass Dialog Glass SnackBar

A modern collection of glassmorphism-inspired Flutter widgets. These widgets provide a sleek, frosted-glass aesthetic with full customization support (gradients, borders, animations, blur, elevation, etc.).


✨ Features

  • Glass Container with blur, gradients, and animated borders.
  • Glass Button supporting text, icons, gradients, borders, and loading state.
  • Glass SnackBar with overlay positioning (top, center, bottom) and multiple active snackbars.
  • Glass Dialog with fully custom child content.
  • Highly customizable with gradients, borders, animations, and padding.

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  glass_ui: ^1.0.0

Import it:

import 'package:glass_ui/glass_ui.dart';

🧩 Widgets

1. GlassContainer

A versatile container with blurred background, gradients, borders, and optional animated border effects.

GlassContainer(
  width: 200,
  height: 120,
  blur: 12,
  elevation: 5,
  borderRadius: 20,
  backgroundGradient: LinearGradient(
    colors: [Colors.white.withOpacity(0.2), Colors.white.withOpacity(0.05)],
  ),
  borderGradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
  ),
  animateBorder: true,
  child: Center(child: Text("Glass Box")),
);

Parameters:

  • width, height
  • blur, elevation
  • backgroundColor or backgroundGradient
  • border or borderGradient
  • borderRadius, padding
  • animateBorder, animationDuration
  • child

2. GlassButton

A glass-styled button supporting text, icons, gradients, borders, and loading indicators.

GlassButton(
  text: "Submit",
  icon: Icons.check_circle_outline,
  onPressed: () {},
  backgroundGradient: LinearGradient(
    colors: [Colors.blue.withOpacity(0.3), Colors.purple.withOpacity(0.2)],
  ),
  borderGradient: LinearGradient(
    colors: [Colors.blueAccent, Colors.purpleAccent],
  ),
  animateBorder: true,
);

Parameters:

  • text, icon, onPressed
  • loading, loadingSpinner
  • width, height
  • backgroundColor or backgroundGradient
  • border or borderGradient
  • borderRadius, padding
  • textStyle, iconColor, iconSize
  • isCircle
  • animateBorder, animationDuration

3. CustomGlassSnackBar

A glass-styled snackbar system with support for multiple positions (top, bottom, center) and simultaneous snackbars.

CustomGlassSnackBar.show(
  context,
  message: "Item added to cart!",
  icon: Icons.check_circle_outline,
  borderGradient: LinearGradient(colors: [Colors.green, Colors.lightGreen]),
  backgroundGradient: LinearGradient(colors: [Colors.white24, Colors.white10]),
  position: SnackBarPosition.bottom,
);

Parameters:

  • message, textStyle
  • icon, iconColor, iconSize
  • borderColor, borderWidth
  • backgroundColor or backgroundGradient
  • borderGradient
  • blur, elevation
  • duration
  • position: top | bottom | center
  • animateBorder, animationDuration

4. GlassDialog

A glass-styled dialog box with full custom content via child.

showDialog(
  context: context,
  builder: (_) => GlassDialog(
    borderGradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
    animateBorder: true,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text("Custom Glass Dialog"),
        SizedBox(height: 20),
        GlassButton(
          text: "Close",
          onPressed: () => Navigator.pop(context),
        )
      ],
    ),
  ),
);

Parameters:

  • child
  • dismissible
  • blur, borderRadius, padding
  • border, borderGradient
  • backgroundGradient
  • elevation
  • animateBorder, animationDuration

📖 Example

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Glass UI Demo")),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GlassContainer(
            width: 200,
            height: 100,
            child: Center(child: Text("Glass Container")),
          ),
          SizedBox(height: 20),
          GlassButton(
            text: "Click Me",
            icon: Icons.touch_app,
            onPressed: () {},
          ),
        ],
      ),
    ),
  );
}

📝 License

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