Skip to main content

ShaderMask

A control that applies a mask generated by a shader to its child.

For example, ShaderMask can be used to gradually fade out the edge of a child by using a LinearGradient mask.

Examples

Adding a pink glow around image edges

import flet
from flet import Image, Page, RadialGradient, Row, ShaderMask, alignment, colors

def main(page: Page):
page.add(
Row(
[
ShaderMask(
Image(
src="https://picsum.photos/200/200?1",
width=200,
height=200,
fit="fill",
),
blend_mode="multiply",
shader=RadialGradient(
center=alignment.center,
radius=2.0,
colors=[colors.WHITE, colors.PINK],
tile_mode="clamp",
),
),
]
)
)

flet.app(target=main)

Gradually fade out image to the bottom edge

import flet
from flet import Image, LinearGradient, Page, Row, ShaderMask, alignment, colors

def main(page: Page):
page.add(
Row(
[
ShaderMask(
Image(src="https://picsum.photos/100/200?2"),
blend_mode="dstIn",
shader=LinearGradient(
begin=alignment.top_center,
end=alignment.bottom_center,
colors=[colors.BLACK, colors.TRANSPARENT],
stops=[0.5, 1.0],
),
border_radius=10,
),
]
)
)

flet.app(target=main)

Properties

content

A child Control to apply a shader to.

blend_mode

The blend mode to use when applying the shader to the content.

See BlendMode from Flutter documentation for blend mode examples.

Supported values:

  • clear
  • color
  • colorBurn
  • colorDodge
  • darken
  • difference
  • dst
  • dstATop
  • dstIn
  • dstOut
  • dstOver
  • exclusion
  • hardLight
  • hue
  • lighten
  • luminosity
  • modulate (default)
  • multiply
  • overlay
  • plus
  • saturation
  • screen
  • softLight
  • src
  • srcATop
  • srcIn
  • srcOut
  • srcOver
  • values
  • xor

gradient

Use gradient as a shader. See Container.gradient property docs for more information about gradients.

border_radius

See Container.border_radius property docs for more information about border radius.