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.