Flutter widgets with shaders

Christian Muehle
Flutter Community
Published in
6 min readMay 30, 2022

--

Shaders can be used in Flutter to create neat effects for games, but you can also make use of them in a normal App by adding them to a widget. Let’s see what Flutter currently offers to create neat effects with shaders in our apps.

Introduction to shaders

If you are new to the topic, I highly recommend to check out one of my previous articles to get started with shaders and learn the basics. The article below is about shaders in games, but it covers all the important things to know.

As I have mentioned, we will be skipping the basics here and focus on how we can include a shader in a widget. We will also step away from the “manual” creation of SPIR-V code and including it as an asset to our app and move on to a more Dart like approach using Umbra.

Photo by Fab Lentz on Unsplash

Preparation for success

The project we will use for this article can be found on my GitHub page:

--

--

Christian Muehle
Flutter Community

From software engineering to managing director - In the maritime industry since 2011. Open Sourc & Flutter fan - Always intrested in the next big thing :)