Glassmorphism in Flutter
One of tendencies in 2021 in Design is Glassmorphism, what give to your object the feeling of a glass.
In here, i will show how to use this in Flutter, and you see it’s very easy.
Following this, you be able to have a widget that you will be able to aply in any other widget. Let’s go.
Create a dart file in your project. in here lets call ‘glass.dart’
we need import just dart:ui and flutter/material.dart.
now our class:
As you see, its very simple.
I using ClipRReact to contain the effect just in the widget.
To make the glass sensation, we use the BackdropFilter.
filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3) will give the blur. I don’t advice change the values. but you can give any value to get your result.
Now inside the container we use a BoxDecoration with a LinearGradient.
LinearGradient receive ‘colors:’ where you use a list of colors, so it need be betwen []
Use ‘Colors.white.withOpacity(0.6), Colors.white.withOpacity(0.3)’ will give that glass feel.
In my class i turned them in ‘start’ and ‘end’ for you can alter the values as wish.
Inside LinearGradient you have to set the directions. with the ‘begin’ and ‘end’. Use AligmentDirection to set.
Add a border also white.
Finally pass the child.
child: child,
Save and you have your editable GlassMorphism Widget to use as you like:
And a example of using the widget:
Hope you all like, and use those tips in your project.