Elektrine lite

← Feed

@usagitan05@void.lgbt

2026-11-04 08:55 UTC

I need to put in more work in text rendering. But I think Flutter’s only approaches to gradient text are rather limited. Here’s the technical rambling: Flutter can paint text with a custom “paint” that has a shader that applies a linear gradient instead. The problem is that the usage of shaders isn’t connected with text painting. The shaders only provide a callback that want a bounds region (rect) that can give the linear gradient shader information how to position itself. Without this the gradient simply looks bad (infinite looping, scratchy text).You can tell Flutter to just put a Text widget on the screen and put a ShaderMask widget on top, that will basically cut out the painted text upon the rendered gradient (as shown below). Flutter can ask the underlying renderer to paint colorful fonts but this is exactly how this approach falls apart. A colored emoji is just a non-transparent character, leaving an indistinguishable flag because it is covered by the gradient. I could also just use a “multiply” approach/color operation, but the colors would regardless look bad.I can go one layer deeper to paint the text manually through a ParagraphBuilder and what not. But I loose all the high-level work that Flutter already provides with Text/RichText/SelectableText widgets. So what are my options? Force B&W emoji fonts on user namesForce people to only carry one name colorGradient character by character (gives me kind of MessengerPlus vibes)Measuring the text size and then providing the metrics to the shader (iffy)Custom paint text with no disadvantages (but this approach will fall apart later on when I have to incorporate decorated names in chat, mixing it with Text widgets) Realistically, it would make more sense to provide Flutter a patch, somehow fixing the gap. As a developer there just isn’t a good approach, as the public APIs are kind of limited. In the end, user experience is my biggest priority, so I might end up butchering the feature idea in one way or another until I find the time to do it right.

Replies (0)

No replies.