Flutter Shaders | How to use Shaders in Your Flutter apps | Livestream #3

In this Livestream, we'll look into using shaders with Flutter.

CHAPTERS:
00:00 Livestream Setup
03:17 Intro
04:45 What are Shaders?
05:50 ShaderToy
08:13 How do we Render a Shader?
12:00 Import Shader
12:50 Compile Shader
13:21 Fix Shader errors
20:40 Render the Shader in our Flutter app
27:35 Animate Shader
32:25 Outro

PLEASE LIKE, SUBSCRIBE, AND FOLLOW
---

#flutter #flutteranimation #openglshaders #glslshaders #shaders #fluttershaders

[rivella]

Very nice! Interesting would be implementing page transitions with that technique by using shaders from e.g GL Transitions.

[Canilho]

Oh man. I've been looking for something like this since I knew it was possible to run shaders inside a Flutter app.
Really happy to see someone made a video about it. Great work.

[prasantkumar]

Really appreciate your support and efforts. Thank you bro

[kslash]

Thank for explaining shaders in such a simple way, new subscriber, hope you make more videos like this!

[laybunzz]

Really good stream! Thanks for showing how this is done 💙

[cycomkid]

I can see shader is compiled while build, can we create new shaders at runtime? Similar to webgl shaders

[dovas]

Hi my friend! Thank you for this rundown tutorial. I am facing a strange problem. The flutter engine (web) and local debugger browser is identifing my glsl file (.frag) from shadertoy as a JSON file, and cannot use it in my app. I checked, and the file contains no JSON syntax at all. I also placed the shader file in different locations, to make sure it was not a "/path" problem. Do you have any suggestions ? I see that in your video, you have a dedicated compiler for the glsl file, which i don't. Docs say that flutter auto-compiles shader files... but i dont see it happening (the -run only takes some seconds to load here)

[dovas]

Hi, expert. Sorry to bother you, and.. Passing 'time' to my procedural shader (one similar to 'Paint 1' from shadertoy), either with Ticker or a slower Timer, cumulatively overloads the memory depending on the ticks period, sooner or later crashing the app. If i keep 'time' constant, no memory overload happens. Is that something i could fix ? The shader is applied through a ShaderBuilder/Animated Sampler to the whole background of the web app.

[alexoveto]

target chrome - works too slow, targets linux and android - didn't show shader