Flutter - Frosted Glass Design Tutorial

hi in this video we are going to create a faucet glass just like this in flutter let's get started [Applause] alright so i've created a new flutter app and first of all let's add the background image to this container by using box to creation [Music] alright as you can see the image doesn't fit entirely in our background to fix this we're going to use fit property and give it box fit dot cover which scales up the image until it fills the entire background then let's center our frosted glass widget by using alignment you can use center widget as well and also the child of the container would be frosted glass box widget which we're going to create right now so create a new file in the current directory i'm going to name it frosted glass dot dart [Music] all right import material design and dart ui and create a new stateless widget called frosted glass box then we're going to have some arguments such as the width the height and the charge which goes inside that frosted glass okay so let's add them in our constructor as well and also don't forget to mark them as required now let's get back to main.dart and give our widget the values and the child could be anything but for now i'm just gonna give it a simple text widget with some style alright we're done with our main files so let's get back to frosted glass file let's replace our container with clipboard rig just to give our frosted glass a bit of border radius the child would be a container with the width and the head which we have just declared earlier and also let's give the color for now a solid white is okay so for the child we're going to use stack because the stack is like layers panel and photoshop we're going to use it to put different effects on top of each other okay so this stack is going to have three children a blur effect a gradient effect and a child which goes inside our frosted glass also to just make it clear the child goes on top gradient in the middle and blur is the last layer all right now let's create our blur effect for the sigma x and sigma y i'm going to give them both the value of 4 and let me mention that the sigma x property is a horizontal blur and the sigma y is a verticaler okay so if we hit save nothing actually happens but if you give it a container as a child the container will stretch the blur effect out until it fits its parent so now if you look at the edges of the container you can see that the blur effect is applied and now let's add some gradient as well as a thin semi-transparent border to make it more like a glass [Music] all right this is the border and now let's lower its opacity and next let's give our container a gradient color which starts from top left and ends in bottom right and both begin and end colors will be white but with different opacities and also i'm gonna replace our containers color with transparent to see the gradient there we go the border that we have just declared here [Music] and the gradient and the really last step is to add a child on the top layer which i'm going to wrap it with the center and the child is what we have defined in the main file let's save and there we go a nice and clean frosted glass do not forget to like and subscribe if you have any questions feel free to ask in comment section and also you can download the source code from github the link is in the description see you later [Music] you

Channel: Hovered Cube

Views: 13,453

Keywords: flutter ui, flutter frosted glass effect, flutter tutorial, flutter design tutorial, flutter frosted glass, flutter development, flutter tutorial for beginners, how to create frosted glass in flutter, frosted-glass tutorial, frosted glass designs, frosted glass design, flutter how to create frosted glass, make frosted glass in flutter, glass in flutter, glass design in flutter, frosted glass design in Flutter, flutter UI Components, flutter design ui, flutter backdrop filter

Id: KBqN5I6Mzxw

Length: 4min 7sec (247 seconds)

Published: Wed Mar 09 2022