Features

This package is to achieve Glassmorphism in your flutter application. It's a new and modern design UI/UX implementation. This package has multiple widgets (i.e. Container, Button, Card, Switch, Dropdown, Tabbar, Drawer etc.) to use. You can use it anywhere inside your flutter application.

Installation

1: Add the latest version of the package to your pubspec.yaml (and run dart pub get):


dependencies:
  flutter_glassmorpism: ^0.0.1

2: Import the package and use it in your Flutter app.


import 'package:flutter_glassmorpism/flutter_glassmorpism.dart';

Example

There are multiple properties that you can modify :

  • height
  • width
  • padding
  • margin
  • radius
  • border
  • backgroundColor

class GlassmorphicContainer extends StatelessWidget {
  final double? width;
  final double? height;
  final double? padding;
  final double? margin;
  final double? radius;
  final double? border;
  final Color? backgroundColor;
  final Widget child;

  const GlassmorphicContainer(
      {Key? key,
        this.width = 200,
        this.height = 200,
        this.padding = 10,
        this.margin = 10,
        required this.child,
        this.radius = 10,
        this.border = 1,
        this.backgroundColor = Colors.white})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
      child: Container(
        padding: EdgeInsets.all(padding!),
        margin: EdgeInsets.all(margin!),
        width: width!,
        height: height!,
        decoration: BoxDecoration(
            border: Border.all(
                width: border!, color: backgroundColor!.withOpacity(0.3)),
            color: backgroundColor!.withOpacity(0.4),
            borderRadius: BorderRadius.circular(radius!)
        ),
        child: child,
      ),
    );
  }
}

Next Goals

  • x Add animation effect on click.

  • x Add ripple effect on click.

  • x Add more custom widgets.

  • x Add shape properties.

Libraries

flutter_glassmorpism