Gradient Text | VERY SIMPLE - NOT PACKAGE #flutter #flutterui

in this video I'm going to show you how to create gradient text without using any external package we are using just flutter widgets for creating this kind of gradient text let's get started so I have a stateless widget here which returns scaffold and inside that we have a text widget which is wrapped with Center so as you can see just plain text gets displayed on the screen so first of all I want to create a couple of variables here the first one being a gradient so I want to create a gradient variable and I want to use linear gradient for our gradient effect okay this one we need to pass some colors the the first one will be colors of let's say a blue accent I want to use blue accent and for the second one I want to copy paste it and change the values so the second one will be let's say red accent okay and the third one let's give set this to Amber so just Amber all right now I want to create another variable that is actually text Style I want to use this text Style for our text widget so we can say text style and this text Style needs first font size let's make our font size really big like 50 and let's give it font weight so the font weight will be okay just font weight of bold I Think Bold should be good so the next one will be Shadow I want to give some Shadows so that the text look text looks like it's popped up a little bit from from background okay so box Shadows takes list and we can pass box Shadows to this property so the I just want to pass one box Shadow and that will be just box Shadow with a color and the color will be so I want to use white because our background is black and let's give this spread radius probably five and then let's give this offset so the offset will be offset so horizontally we want to give one and vertically let's say just one okay so now uh if I save it nothing changes because we did not apply it yet so here I want to come down here inside of a text widget first of all I want to apply text style so for that I used style and I will just assign our text style to this one okay this text style coming from about just from the one we created earlier so now if I save it as you can see our text is big and it has a little bit of Shadow if you cannot see it so now I want to wrap my text widget with a widget that actually enables us to create that gradient effect so I will wrap it with Widget so this widget is Shader mask so this Shader mask has some properties you can actually create really good some Advanced graphical effects with the widgets you want okay in this case we want to apply that kind of effect to our text widget so first of all we need to pass this Shader mask callback function that callback function is a Shader callback and this will give us bounce so we need to return a Shader to this property so for it I can return our gradient so basically I'm not going to return our gradient but I want to create Shader from this gradient we created earlier okay this is the variable we created up here so gradient and we can call create Shadow method of this this method takes the rect so let's give it react we want to use react Dot from Left Right with height okay this first of all left will be zero top will be zero and width for width and height we want to use the values coming from this balance okay this is actually bounce that is specific to our widget so with with the help of this value we can actually uh give bounds to our gradient effect so it will be applied to only the specific pixels so first of all for this bounce width so we are going to use uh without with property of it and height okay now uh if I save it now you can see our gradient changed to this one so let's try to change begin and end of this linear gradient so for that I want to use begin property of linear gradient and for it we need to pass alignment so alignment let's set it to probably top Center okay and then the next one will be and so the end will be alignment dot let's say Center left okay now as you can see our text changed so you can actually play with this properties the properties of linear gradient as well and also the properties of this Shader mask so with this you can you can do a lot of cool things okay this is just one simple gradient text so this is it guys if you really liked the video you can press that like button and if you want more content like this you can subscribe to my channel see you in the next video

Channel: Shohruh AK

Views: 635

Keywords: flutter, flutter dev, coding, programming, mobile development, android app, ios app, web app, web development, frontend developper, mobile applications, flutter coding, how to code, how to create flutter, flutter widget, flutter functions, cross-platform application, flutter website, javascript, html, css, python, docker, react js, dart, dart and flutter, deploy flutter, flutter google play, developper life, Shohruh AK, shoha dev

Id: zOgup8A94JM

Length: 5min 58sec (358 seconds)

Published: Thu May 18 2023