ShaderMask in Flutter

Today’s article mainly focuses on ShaderMask and how to utilize it in a flutter. It is a widget that applies a shader-created spread to its child, in this widget that is valuable for using shader-impacts to a widget. There are vast quantities of the fresh impacts that you can accomplish with shaders.

What is ShaderMask?

• LinearGradient
• RadialGradient
• SweepGradient

Let’s take a look at them one by one and see how we can apply effects to the child.

We presently observe a case of wrapping a widget with ShaderMask and what all properties and strategies are offered by ShaderMask to accomplish the impact we need on its child. We will have a straightforward Container with bounds alongside a picture as it’s child, as underneath:

body: Center(
    child: Container(
     width: double.infinity,
     height: double.infinity,
      child: Image.asset("assets/showroom.jpg",fit: BoxFit.cover,),
    ),

we wrap Container with ShaderMask, we also need to add the required parameter named shaderCallback

body: Center(
  child: ShaderMask(
    child: Container(
     width: double.infinity,
     height: double.infinity,
      child: Image.asset("assets/showroom.jpg",fit: BoxFit.cover,),
    ),
  ),

shaderCallback as the name demonstrates, is the callback that acknowledges bounds for Rect (represents Rectangle) that assists with making the shader for the given bounds, i.e., the way toward recognizing the region where to begin shading.

LinearGradient:

This accepts begin and end as two optional bounds followed by color that accepts a list of colors that will be applied to the child. Note that, begin and end accepts only Alignment objects, so we need to pass regular alignments that indicates how the effect will be aligned, as below:

shaderCallback: (bounds) {
  return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Colors.black,
        Colors.red
      ]
  )

Here, the callback execution isn’t finished at this point, implies, we have dipped the brush in color and are prepared to paint the wall, at the same time, we haven’t got a thumbs up, to begin with, the task. The last piece of this implementation is another strategy named createShaders() that acknowledges the bounds on which the colors are to be applied. We should decide:

shaderCallback: (bounds) {
  return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Colors.black,
        Colors.red
      ]
  ).createShader(bounds);

In ShaderMask to begin applying or fill the colors on the child in the given bounds. Presently, in the event that we run this, we’ll see:

Here, we just applied a linear gradient on a picture and ShaderMask traversed those colors over the Container . However, this isn’t sufficient for us to utilize ShaderMask. We likewise need to apply a few impacts on the picture to make it increasingly improved, so we will utilize blendmode property.

shaderCallback: (bounds){
      return LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.black,Colors.red]
      ).createShader(bounds);
    },
    blendMode: BlendMode.color,

---

BlendMode:

BlendMode impacts take a shot at the idea of source and destination . All types of blend mode effects are applied dependent on these two terms. You can find out about these terms in detail here, and there is some blend mode.

• BlendMode.color: This property mode basically paints the picture with the given colors.
• BlendMode.colorBurn: This property paints the picture with rearranging impacts dependent on the color gave.
• BlendMode.colorDodge: This property paints the picture with shine dependent on the color gave.
• BlendMode.darken: This property paints the picture with dark dependent on the color gave.
• BlendMode.clear: This property removes the picture or text and shows a blank screen.

RadialGradient:

This shows the gradient/color impacts in concentric circles. Alongside different modes, we can change the presence of the picture as we need. We should see a couple of examples:

body: Center(
  child: ShaderMask(
    shaderCallback: (bounds){
      return RadialGradient(
          colors: [Colors.blue,Colors.red,Colors.orange]
      ).createShader(bounds);
    },
    blendMode: BlendMode.colorBurn,
    child: Container(
     width: double.infinity,
     height: double.infinity,
      child: Image.asset("assets/showroom.jpg",fit: BoxFit.cover,),
    ),
  ),
),

return RadialGradient(
      colors: [Colors.blue,Colors.red,Colors.orange]
  ).createShader(bounds);
},
blendMode: BlendMode.softLight,

---

SweepGradient:

This shows the gradient/color impacts in a circular segment. With regards to bend, we consider angles, isn’t that so? Correspondingly, this gradient gives properties, for example, startAngle and endAngle to change appearance as required. Obviously, the distinction blend modes can be utilized to improve the impact. Below is to see a few examples:

body: Center(
  child: ShaderMask(
    shaderCallback: (bounds){
      return SweepGradient(
        startAngle: 0.1,
        endAngle: 1.0,
          colors:              [Colors.indigo,Colors.blue,Colors.red,Colors.orange]
      ).createShader(bounds);
    },
    blendMode: BlendMode.hardLight,
    child: Container(
     width: double.infinity,
     height: double.infinity,
      child: Image.asset("assets/showroom.jpg",fit: BoxFit.cover,),
    ),
  ),
),

return SweepGradient(
    startAngle: 0.1,
    endAngle: 1.0,
      colors: [Colors.indigo,Colors.blue,Colors.red,Colors.orange]
  ).createShader(bounds);
},
blendMode: BlendMode.darken,

I utilized just the basic essential properties for the demo. I’d recommend you evaluate all properties to see how they help to upgrade and change the presence of the picture.

Take a moment to take note of the effect blend mode values show up of the picture. You may look at the impact by evacuating the blend mode property to see the picture being painted and afterward returning the mixing again to see the distinction or effect.

---

Conclusion:

This article would serve as an Exploratory article for ShaderMask and its working using Flutter. We perceived how ShaderMask widgets could be useful to apply shading impacts and change the presence of their child. Rather than image , we can utilize different widgets as well, for example, a Text . There are different properties that Gradient the class gives explicit to Linear, Radial and Sweep types we saw above, for example, tileMode , focal , radius , center , stops , etc.

I hope this blog has provided you with valuable information about what is all about ShaderMask, and that you will give it ShaderMask — a Try. Begin using your apps.

Thanks for reading this article ❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter ShaderMask Demo:

flutter-devs/Flutter_ShaderMask_Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---