Glassmorphic Container ๐Ÿ”จ

A Flutter package for creating Glassmorphic UI designs in an easy and simple manner! Supports iOS, Android, web, Windows `Still_Under_Build`, macOS `Still_Under_Build`, and Linux `Still_Under_Build`.

Glassmorphic Example App. With realtime pub.dev stats๐Ÿ“ฑ

A package that simplefies your urge to create a interactive Glassmorphic Container.

Inspired by Glassmorphism CSS Generator. Highly customizable and helps developing beautiful Glassmorphic UI.

Usage ๐Ÿ’ป

likes
pub points
popularity

To use this plugin, add glassmorphism as a dependency in your pubspec.yaml file. Use the below example to get started with the sample example.

Features ๐Ÿ”ฎ

  • Fully customizable components
  • Easy To use
  • Multiple Childs widgets supported
  • Gesture Listener GestureDetector
  • Circular Border / Traditional Borders
  • Gradient Borders
  • Gradient Fill on container Full_Control_to_User

example, Simple Glassmorphic Container with Blur.

Example

import 'package:flutter/material.dart';
import 'package:glassmorphism/glassmorphism.dart';
import 'dart:ui';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GlassmorphicContainer Example',
      home: GlassmorphicSample(),
    );
  }
}

class GlassmorphicSample extends StatefulWidget {
  @override
  State<GlassmorphicSample> createState() => GlassmorphicSampleState();
}

class GlassmorphicSampleState extends State<GlassmorphicSample> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: Stack(
          children: [
            Image.network(
              "https://github.com/RitickSaha/glassmophism/blob/master/example/assets/bg.png?raw=true",
              fit: BoxFit.cover,
              height: double.infinity,
              width: double.infinity,
              scale: 1,
            ),
            SafeArea(
              child: Center(
                child: GlassmorphicContainer(
                    width: 350,
                    height: 750,
                    borderRadius: 20,
                    blur: 20,
                    alignment: Alignment.bottomCenter,
                    border: 2,
                    linearGradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          Color(0xFFffffff).withOpacity(0.1),
                          Color(0xFFFFFFFF).withOpacity(0.05),
                        ],
                        stops: [
                          0.1,
                          1,
                        ]),
                    borderGradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [
                        Color(0xFFffffff).withOpacity(0.5),
                        Color((0xFFFFFFFF)).withOpacity(0.5),
                      ],
                    ),
                    child: null),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Parameters โš™๏ธ

  • height (double) `required` - Height for the Widget `required`.
  • width (double) `required`- Width for the Widget `@required`.
  • borderRadius (double) `required`- Border Radius for the widget 0 - any `@required`.
  • linearGradient (LinearGradient) `required`- Fills the container with the gradient passed.
  • border (double) `required`- Gives Width to the ContainerBorder.
  • blur (double) `required`- Gives BlurFilter to the Container.
  • borderGradient (LinearGradient) `required`- Fills the container's border with the gradient passed.
  • child (widget) - optional parameter If there is a child widget then the widget will be rendered inside the container.
  • alignment (optional) - Handles the alignment `Default_value` - `Alignemt.topleft`.
  • padding (EdgeInset) - Used to provide pading to the child widget `Default_value` - `None`.
  • BoxShape (Fixed) - This value is fixed to `BoxFit.rectangle`.
  • constraints (ChatUser) - The constructor width and height arguments are combined with the constraints argument to set this property.
  • margin (double) - Empty space to surround the decoration and child.
  GlassmorphicContainer(
    width: width,
    height: height,
    borderRadius:borderRadius,
    blur: blur,
    alignment: alignment,
    border:border,
    linearGradient: linearGradient,
    borderGradient:borderGradient,
    child: null),
  );

My Socials ๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ

Credits ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Logo
The Flutter Foundry ๐Ÿ’™
Instagram
Logo
The Flutter Guy ๐Ÿ’™
Instagram

Found this project useful? โค๏ธ

If you found this project useful, then please consider giving it a โญ๏ธ on Github and sharing it with your friends via social media.

License โš–๏ธ

API details ๐Ÿ“

See the glassmorphic.dart for more API details

Issues and feedback ๐Ÿ’ญ

If you have any suggestion for including a feature or if something doesn't work. Feel free to open a Github issue for us to have a discussion on it.

Libraries

glassmorphism