In this blog, we will be going to learn about ShaderMask In Flutter and check how its works with child widgets for creating shader impact. A shader is a graphics effect that allows you to control the colors and/or transparency of the pixels in an image or other graphical content.
The ShaderMask the widget takes two required parameters: shaderCallback and child. The shaderCallback is a function that returns an Shader object, which describes the shader to be applied. The child is the widget to which the shader will be applied.
Let’s check how we can implement the ShaderMask In Flutter.
You may also check our Flutter app development company page.
Here’s an example of using ShaderMask to apply a gradient to an image:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Center( child: ShaderMask( shaderCallback: (Rect bounds){ return RadialGradient( center: Alignment.topLeft, radius: 1.0, colors: <Color>[Colors.yellow.shade50, Colors.deepOrange.shade900], tileMode: TileMode.mirror, ).createShader(bounds); }, child: SizedBox( width: double.infinity, height: double.infinity, child: Image.asset("assets/images/images.jpeg",fit: BoxFit.cover,), ), ), ), |
In this example, the shaderCallback function returns a LinearGradient an object that creates a gradient from red to blue, which is then applied to the child Image widget. The blendMode the parameter specifies how the shader should be blended with the child widget; in this case, it’s set to srcIn, which means that the shader will be multiplied by the child widget’s alpha channel.
We can produce various visual effects using various shader types like Vignettes, blurring, and patterns.
We have created a sample app for understanding the usage. you may use it according to the requirements. You may also try different gradients supported by the Shader callback.
Output
The output of the aforementioned code is the image below.
Conclusion
We talked about ShaderMask in Flutter in this blog.
I hope it will aid in your comprehension and provide you with a basic understanding of it.
You may also read the Flutter Dev for additional information.
I appreciate your reading.