Building custom fragment shaders - Flutter Build Show
Вставка
- Опубліковано 31 лип 2024
- Learn how to build a custom fragment shader, from GLSL code to the widgets that connect it to the rest of your Flutter app.
Chapters:
0:00 - Background of Flutter rendering
3:43 - Writing a simple shader
6:22 - Adding the shader to Flutter
10:55 - Passing a color value
12:48 - Difference between widgets and custom shaders
14:18 - Adding a gradient to our shader
17:51 - Handling color alpha
19:30 - Conclusion
Resources:
Book of Shaders → goo.gle/3qbNVO8
Next-gen UIs in Flutter → goo.gle/3IErjvZ
Codelab → goo.gle/3MVQgpm
Solid_fill.frag → goo.gle/3MA29zD
Catch more videos → goo.gle/FlutterBuildShow
Subscribe to Flutter! → goo.gle/FlutterYT
#FlutterBuildShow - Наука та технологія
The best part of learning Flutter is definitely gaining the vast knowledge around the Graphics rendering world.
Most of the frameworks abstracts those areas so much that they can't be modified easily or there are no docs simply.
I'm amazed by the script and the talent behind its presentation! Salute to Craig and team! 🔥
Please keep this series going! It's so insightful!
This is well done and a great augmentation of the usual (also great) bite-sized shorter videos. Keep them coming! I also appreciate that there is much less than usual comedic distractions.
Your show really gives me some special kind of love towards flutter as it feels like the maths and tech i was mad of in college, comes together with this show as a bundle. Thanks alot.
Absolutely the best explication I see on shader and Flutter!!
We live in a time where you can watch an incredibly well made video for an incredibly specific topic.
Ma shaa Allah I'm not going to lie but this is so far the best GLSL tutorial I've ever seen. I love shaders!
13:39
This exposes the fundamental workings of Shaders, which helps me comprehend it better！
Great show!
I would love to see:
- A walkthrough on how to custom paint inside flutter effects like TextOverflow.fade in my custom text widgets like if I wanted to create an expandable comment that fades at the end of the second line and shows a button for me to expand it
- A walkthrough on how to use MultiChildRenderObjectWidget to create an UI like VSCode editor (meaning an user changeable UI)
- A walkthrough on how to create your own slivers (or inner scrollable widgets like TextField inner scroll)
- A walkthrough on how to setup a long living and a short living isolate
- Some exercises for us to test our knowledge on the things that you show.
Yes! This series is fantastic!
Crispy clear.. Thank you Craig. When you know - you know!
very good explanation of an advanced topic!
Loved the structure of this video! Super well-made and progressed very logically in a way that was easy to follow. It might have gone beyond the intended scope, but I would have been interested to see an example of using the ShaderBuilder widget from flutter_shaders you mentioned. Eager to dive in to shaders!
It would be amazing to deep dive in the scrollables' scroll physics!!!
FlutterBuildShow = gold. Great stuff!
Thanks a lot!
I'm come from twitter, thanks your work
This was so concise and easy to understand. Thank you
So I've always overrode shouldRepaint with false as a return parameter. This tutorial opened me up
🔥
Production & content quality is just op!!!
Thanks it was a great video!
Can I use structures in shader code to aggregate some data? Does flutter support it?
Thanks this is amazing! How we can use Vertex Shaders with that?
Thank God, I wished this was up today..
OMG i had a cutmull-rom spline waiting for a year for this !
Can those be used in backdrop filters?
Always Top 🎩
Awesome❤ keep going please
Oh man. GLSL is so far outside my wheelhouse, but I feel like it's important to my next steps as a Flutter developer. What about demoing some more advanced shaders, like a water drop effect? Or animating a shader?
Shaders are fun, but I would not say they are a required skill for your average Flutter developer (which includes me)
@@laybunzz Do you have any numbers on how much performance we can gain if some of the UI parts were directly implemented in shaders? Looking to create solutions with a really underpowered device.
You won't need custom shaders for most of the typical applications. Unless you want to create a really fancy UI with too much going on.
Very good video. Have a good weekend. Good luck.🌺🌺🌺🍀🍀🍀
🎉
💯
When you don’t use variable in your shader, then compiler delete it from code. So, app will crash when you try to launch it when uSize not in use. Just try to send color values start from 0 index.
This should be pinned. 👋👋👋
saved my life, thanks
I thought the shader compiler removes unused input variables then how the first 2 setFloat(...) calls worked ? normally, opengl(es) offers an api that returns the uniform parameter index, but i did not see any here.
You are correct. The App will crash if you try to assign 4,5 if uSize is unused.
@@KrishBhanushali-cs4xk thank you for the clarification 😄
While these are interesting topics, please consider making more content on creating Line of Business (LOB) or CRUD apps, from start to finish, using relevant best practices and architectures. After all, most of devs work on such apps. Thanks!
😍
👍🔥
Gg
Oh sorry, I thought that this was about shady customers? I'll see myself out ...
Create an entire playlist for shaders
Performant != high performance. Should just use high perf.
what do you mean? I haven't watched the video.
Actually I looked in the dictionary and you guys are both wrong:
per·form·ant pərˈfôrmənt
adjective performant
functioning well or as expected.
noun performant plural noun performants
a person who performs a duty or ceremony.
It has both meanings. Performant is perfectly fine here. Perfomant == high performance.
Either way, the title was an error and has been updated :)
@@twothreeoneoneseventwoonefour5 there’s plenty on the web to read on why it is not high performance
WGSL > GLSL
I wonder why Google powered product always uses Microsoft based product "vscode"
alternative ?
@@dovas90 vscode
really good tutorial, thanks a lot!