And what about the “Fragment” part of “Fragment Shader”?
So, now that we know what we can use shaders for, let’s see where they fall in the process of drawing UI to the screen.
Team only just started boasting about usa email address data Fragment Shader API with the release of Flutter 3.7[2], shaders were an essential part of Flutter since the very beginning. And Flutter itself uses them all the time – without even telling you – for stuff like gradients, blurs, drawing images, etc.[3]
When you put a widget in Flutter’s widget tree, Flutter represents this widget as two separate entities under the hood – Element and RenderObject.
The RenderObject is the one responsible for explaining to Flutter Engine how the widget should map to pixels on screen. And it does that using the Canvas API.[4] If you’ve ever encountered a CustomPaint widget, the idea is essentially the same. Those draw commands are then passed through what is called a rendering pipeline.
Flutter's rendering pipeline – Fragment Shaders in Flutter
And if you pay attention to this pipeline, you might notice that there’s more than one type of shader.
Let’s deal with the Vertex Shader first.
The name suggests what it’s used for. It takes some geometry as an input, and executes some operation for every vertex of that geometry. That operation might be moving the vertices around, for example, or just doing some useful calculations that may come in handy in the following steps. But since we’re mostly operating on simple rectangles in Flutter, vertex shaders are not very practical for us.
Vertex Shader – Step-by-step guide in Creating Fragment Shaders in Flutter
So Fragment Shader, again, as the name suggests, is a shader that works on fragments.