April 6, 2020
ShaderMask (Flutter Widget of the Week)

ShaderMask (Flutter Widget of the Week)


♪ (theme music) ♪ShaderMasksare one
of Flutter’s hidden gems.ShaderMaskslet you apply a shader to one or more widgets in the tree. Shaders are very flexible. In Flutter we can use them
to apply gradients to widgets. We can also use them to apply images. To apply a shader to a widget, wrap the widget in aShaderMaskand supply theShaderMask
with the shader you’d like to apply. How do you create shaders? Fortunately, Flutter’s gradient classes have a handycreateShadermethod
to do just that. Let’s take a look at a cool effect
and apply some flames to text. Wrap the text in aShaderMask
and give it aRadialGradient,and give the gradient
some good fiery values. And presto! Burning text! There’s tons of cool effects
you can achieve with shaders. For more info onShaderMasks
and all the other widgets, check outFlutter.dev♪ (music) ♪

32 thoughts on “ShaderMask (Flutter Widget of the Week)

  1. I have been searching for some awesome gradients to apply in my project and… this video is solution to my problem !!!! Thank You @Flutter !! 🥳🥳🤩🤩

  2. Automatic click when i got the notification on my smartphone ! Dunno we could use it as a Widget, I was always using it from property shader of a widget… Thx a lot !

  3. Flutter team is not only making efficient dev tool but also raises mobile dev standards. Other platforms look dinosaur-like every time new widget comes out. Keep on going!

  4. This is pretty awesome. I would love to see some tutorial or material on how to use or create new shaders, I have been having a hard time finding material about it.

Leave a Reply

Your email address will not be published. Required fields are marked *