DEV Community

rrtutors
rrtutors

Posted on • Originally published at rrtutors.com

How to Get Glassmorphism Effect in Flutter

What is Glassmorphism?

Flutter Glassmorphism is a term used to describe UI design that emphasizes light or dark objects, placed on top of colorful backgrounds. A background blur is placed on the objects which allows the background to shine through – giving it the impression of frosted glass

You can wrap your widget with Back Drop Filter and add an image filter but, this process is a bit complicated so, we will see an easy way all you have to do is add a line like this to your package's pubspec.yaml.

dependencies:
  glassmorphism: ^3.0.0
Enter fullscreen mode Exit fullscreen mode

Once installed you will get access to a widget called GlassmorphicContainer, it has various properties

width: used to control the width of the container.

height: used to control the height of the container.

borderRadius: used to change the border radius.

linearGradient: used to provide background gradient with different colors.
child: which will hold all our widget that will have this effect.

we can add gradient like this for example

LinearGradient(colors: [

                        Colors.white.withOpacity(0.2),

                        Colors.white.withOpacity(0.05)

                      ], begin: Alignment.topLeft, end: Alignment.bottomRight),

Enter fullscreen mode Exit fullscreen mode

this will have the most common white forsted glass effect.

Flutter Glassmorphism

Flutter Glassmorphism

Complete code for Flutter Login Page - FrostedGlass Background Flutter

Find Flutter Login Page example

Discussion (0)