Loading video...

Video Failed to Load

Go Home

Time to play with Liquid Glass in your #FlutterDev app! I've pushed a prerelease to pub, check it out here: It is obviously a first version, so don't expect this to work perfectly, and the API might change a lot still 🥃🥛🥂🍑

39,493 views • 1 year ago •via X (Twitter)

44 Comments

Seth Ladd's profile picture
Seth Ladd1 year ago

Also, let us know if you need anything from the lower levels of the framework or engine to make this easier for you.

Tim's profile picture
Tim1 year ago

There were a bunch of ways I went down where I had to turn back because of Flutter limitations. One of them is the lack of support for floating point textures in shaders. There is no good way I found to render a shader output to a pass and use it for another shader

Seth Ladd's profile picture
Seth Ladd1 year ago

Good feedback thank you

Tim's profile picture
Tim1 year ago

Thank's again for being so engaging always, such an asset to the community!

Seth Ladd's profile picture
Seth Ladd1 year ago

it's easy when we're so inspired by folks like you!

Seth Ladd's profile picture
Seth Ladd1 year ago

Does this work in Flutter Web?

Tim's profile picture
Tim1 year ago

No, it relies on ImageFilter.shader, so it’s exclusive to Impeller… but there might be a way to get it to work in Skia

Seth Ladd's profile picture
Seth Ladd1 year ago

Love the settings to play around with it!

Tong Mu's profile picture
Tong Mu1 year ago

The merging shape is amazing!

Jules Bilong's profile picture
Jules Bilong1 year ago

The only thing missing is the clipping. ✨👏✨

Tim's profile picture
Tim1 year ago

Do you mean the prism-like effect? Say no more ☺️

Jules Bilong's profile picture
Jules Bilong1 year ago

Yes, that's correct, but it seems that IOS26 effect is slightly different. It partially hides 12% of Apps Icons before revealing the first deformation.

Tim's profile picture
Tim1 year ago

Ah, I see what you mean! That is just part of the refraction, my implementation does it the exact same way, but how strong it is depends on the thickness of the glass. Look at the video when I pull the glass over the „phone“, it also only becomes visible further in :)

Jules Bilong's profile picture
Jules Bilong1 year ago

Your approach is very good, but to be 1:1 with iOS 26, it needs to exhibit that behaviour accurately. I'm looking forward to your next update. Well done!✨👏✨

Sebastian Röhl's profile picture
Sebastian Röhl1 year ago

Damn, that was fast! Good job 🙌

Jisena's profile picture
Jisena1 year ago

You might find this interesting @tuke2911

Smit Mehta's profile picture
Smit Mehta1 year ago

The liquid_glass_renderer/example Doesn't Work When Run Or Built In Debug Mode On Windows For Any Of It's Supported Compile Target Platforms, Namely, Web: Dart2JS/WASM Cuz ImageFilter.shader Dep, But Same For Windows & Android: w/wo '--enable-impeller' Flags Passed Explicitly ...

Tim's profile picture
Tim1 year ago

Yes, I forgot to put this in the readme, but it‘s Impeller only for now. Sorry!

Arsh Abbas Hashmi's profile picture
Arsh Abbas Hashmi1 year ago

Please let me know if I can contribute

Zen Bui's profile picture
Zen Bui1 year ago

You nailed it 😍

Julio Cruz's profile picture
Julio Cruz1 year ago

@ArkangelB This looks awesome 🔥 thanks for creating it!

Atharv 🏎's profile picture
Atharv 🏎1 year ago

I am stuck here from last 30min if i remove tha package and from the gradle.prop the it work if i add stuck here ..you know any fixes to this?

Tim's profile picture
Tim1 year ago

I actually haven’t tested the shader on android, I’ll get back to you!

Atharv 🏎's profile picture
Atharv 🏎1 year ago

Sure 👍 i used my full brain power to run it 😭

Satendra Pal's profile picture
Satendra Pal1 year ago

Will not use liquid glass for the core part of my app. It is a short-term hype.

Hark Singh's profile picture
Hark Singh1 year ago

You are really cookin 🥵🥵

Kingkor Roy Tirtho's profile picture
Kingkor Roy Tirtho1 year ago

Making this is probably the easiest in Flutter. We have access to shaders which other native & cross-platform UI frameworks can only dream of😂 Although shader programming is really complex and hats-off to your amazing work

Marno's profile picture
Marno1 year ago

Cool, can't wait to try.

Dart's profile picture
Dart1 year ago

Thank you timmay!

Tim's profile picture
Tim1 year ago

Very welcome zackey! 💫

Youcef Dev's profile picture
Youcef Dev1 year ago

Niceee!

Mario Princess's profile picture
Mario Princess1 year ago

Frosted glass in Flutter? Yes, please! I'm all in for early tests. 🥂

CodeGuru's profile picture
CodeGuru1 year ago

very nice looks great

MangoMagic™️'s profile picture
MangoMagic™️1 year ago

Liquid Glass in Flutter? Sounds slippery. Hope it holds together. #BubbleWrapCoding #GlassyEyedDev #JustAddSpill

Atharv 🏎's profile picture
Atharv 🏎1 year ago

How to fix this 🥲

Tim's profile picture
Tim1 year ago

Oh damn I need to update the readmr, I changed the name to LiquidRoundedSuperellipse

frank cayo's profile picture
frank cayo1 year ago

nice

Ravi Patel's profile picture
Ravi Patel1 year ago

It's not working, and some classes are missing. Please ensure that the plugin is easy to use for developers, and kindly update your implementation example for better clarity.

mFeinstein's profile picture
mFeinstein1 year ago

Are you adding chromatic aberrations?

Tim's profile picture
Tim1 year ago

Already in the newest version :)

MrHeer's profile picture
MrHeer1 year ago

Amazing!! I noticed that Apple's liquid glass deforms like a liquid when there is acceleration. I wonder if you have achieved this effect.

Tim's profile picture
Tim1 year ago

Not yet, but it's on the list!

MrHeer's profile picture
MrHeer1 year ago

Cool, Cool man, Cool work!

Goodnews James's profile picture
Goodnews James1 year ago

@imadetheseworks thanks for your contribution to flutter this package mean a lot to me, i sent hours trying to do this on my own without a package this is what i got

Related Videos