This package gives a frosted glassy effect to the widgets, images and simple containers.

Features

• Simple Frosted Glass Effect.
• Frosted Glass Effect with Image Background.
• Any child widget can be used, similar to Container (Use it with no Background Color).
• Effect with Background Color.

Getting started

Add the dependency under the dependencies in pubspec.yaml file:

    dependencies:
        frosted_glass_effect: ^0.0.1

Usage

Import the package using the code below.

import 'package:frosted_glass_effect/frosted_glass_effect.dart';

The Class has the following attributes

GlassContainer({
  Widget widget,
  double? radius,
  double? height,
  double? width,
  String? backgroundImage,
  Color? backgroundColor,
})

Remember

• Any Custom widget can be passed to this Glass Container. The widget will appear on top of the backgound image or color.
• Keep the widget transparent if you are using the background color or image.
• The width is automatically expanded restrict the width according to your need.

Example Widgets

GlassContainer(
    radius: 20,
// backgroundImage:  "assets/bg.jpg",
    backgroundColor: Colors.red, 
    widget: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Container(
            `child: const Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                Text("\$16/mo", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),),
                Spacer(),
                Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                    Spacer(),
                    Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                        Text("PRO", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.normal),),
                        Text("On Sale Now!", style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),)
                        ],
                    )
                ],)
            ],),`
        ),
    ),
),

Use background image from the assets.

Additional information

You can play with the blurness of the widget by adjusting the SigmaX and SigmaY in the source code of this package.

BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
      ....
),

Contribute to the package on https://github.com/SaadTanveer14/frosted_glass_effect You can open issues and pull requests for contributions.