1

Out of the box we get LinearGradient, RadialGradient and SweepGradient. What I would like to do is something similar to the shown image below. Let's say we draw a custom shape with CustomPainter. When this customShapeGradient is applied on it, the gradient should start from the border of the custom shape and go towards the center. I realize that this might introduce wierd effects since our shape will mostly be not symmetric and a "border to center" approach is not as easy as a "center to border" approach(like the 3 out of the box methods). Here it will be the developer's responsibility to make sure the gradient fill do not overlap with itself, meaning it won't go all the way to the center.

Here is an image I found for an Elliptic shape which most closely describe what I want. Let's say our shape is the line with the yellow color. And I want to achieve the gradient which fills inside. Elliptic Custom Gradient

This is a similar image too: Omit the navy background,shape has teal border

The two examples I have provided are for ellipses however my question is for any type of shape that is created by a CustomPainter.

I am almost sure this is possible since a shadow(gradient in nature) is basically the inverse of this. We can apply a shadow to a CustomPainter shape. The only difference will be that the shadow will grow towards inside of the shape(maybe like a inner shadow).

aytunch
  • 1,326
  • 1
  • 16
  • 31
  • 1
    *"I am almost sure this is possible since a shadow(gradient in nature) is basically the inverse of this."* - check `MaskFilter` class - `BoxShadow` uses that class when creating `Paint` object (`BoxShadow.toPaint()` method) – pskink Jan 20 '20 at 07:41
  • @pskink I sure will have a look as soon as possible, do you have any experience with it? – aytunch Jan 20 '20 at 15:35
  • 1
    i used it couple of times to give [neon "glow" effect](https://pngtree.com/freepng/neon-glow-december-month-text-effect_5009352.html) – pskink Jan 21 '20 at 08:12
  • @pskink wow did you manage to get something close to the png you have shown with Flutter? I would love to see the code if it is open source. And if not, maybe a snippet? :D – aytunch Jan 22 '20 at 17:45
  • it is `MaskFilter` - check the docs for more info – pskink Jan 22 '20 at 17:48

0 Answers0