glass

Description:

glassmorphism

Glassmorphic Container 🔨

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


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 💻 #

> >

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.

You can follow this tutorial and work around with the package. #
Glassmorphism UI Package For @Flutter || UI || A Glassy and easy to use Package #flutter


Features 🔮 #

Fully customizable components
Easy To use
Null Safe version
Multiple Childs widgets supported
Gesture Listener GestureDetector
Circular Border / Traditional Borders
Gradient Borders
Gradient Fill on container [Full Control to User]

To use GlassmorphicContainer with fixed Height and width: #
GlassmorphicContainer(
width: 350,
height: 350,
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,
),
copied to clipboard
Use GlassmorphicFlexContainer with responsiveness or take child widgets size. : #
GlassmorphicFlexContainer(
borderRadius: 20,
blur: 20,
padding: EdgeInsets.all(40),
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,
),
copied to clipboard

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),
),
),
],
),
),
);
}
}
copied to clipboard
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),
);
copied to clipboard
My Socials 👩‍👦‍👦 #

Official

Github
Instagram
Twitter
Youtube


Personal

Instagram
Twitter



Credits 👨🏻‍💻 #

The Flutter Foundry 💙 - Instagram Link
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 ⚖️ #

MIT

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.