glassmorphism 1.0.4
glassmorphism: ^1.0.4 copied to clipboard

Flutter Android iOS web

A Flutter package for implimentation of Glassmorphic UI easily.

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.

16
likes
100
pub points
45%
popularity

A Flutter package for implimentation of Glassmorphic UI easily.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

riticks123@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on glassmorphism