Tim

Tim

@i.madethese.works

UX Engineer and one half of @whynotmake.it Probably mainly #FlutterDev posts Portfolio at i.madethese.works

262 followers265 following81 posts

Our talk on Physicality in UX has been uploaded to YouTube! If you want to learn how to build physically driven interfaces in #FlutterDev check it out! If you just want to learn about motor and why you should use it, skip to 19:00 🏎️

liquid_glass_renderer is still progressing nicely! This is entirely rendered in #Flutter at 2.2ms/frame, no overheating or frame drops. It's still not ready for production, maybe I'll never call it that, but it's definitely cool to push what's possible :) Physics by motor btw!

By the way, motor 1.0 is out! I'll be sharing more here soon once my FlutterCon talk is uploaded. We cooked up a bunch of cool examples and visualizations to show why motor is the best choice for orchestrating your #Flutter animations right now

Also cute for loading spinners! (I'm tired of the same material spinner everywhere anyway 😅) #FlutterDev

Tim@i.madethese.works

#FlutterDev shaders and hand drawing are a super fun combination! Check out this y2k liquid metal shader ⛓️

Another #FlutterDev quiz: There is a subtle difference between these two implementations. Which one of them is more robust and why?

Niche flutter question: is there any way to force flutter not to bundle the assets from a certain package (at build time based on environment var) Tree shaking the packages code is fine, but assets not so much #flutterdev

#FlutterDev challenge: Fade between two widgets, but never let anything behind them show, provided both had full opacity. Parts that have 0.5 opacity in both should have 0.5 in the result. Conceptually, each pixel should interpolate its color values between the widgets.

One of the fun learnings from understanding the inner workings of AnimationController for the next springster update: Everything is represented as simulations internally, classic #FlutterDev animations are really just physics simulations that don't use the initial velocity

Tim reposted

My animated_to package now introduces “spring simulation” version of AnimatedTo widget, AnimatedTo.spring()! This enables physics-based animation when child updates its position, which means so smooth and natural! Try this by importing the latest version of 0.3.1! pub.dev/packages/ani... #FlutterDev

Fun fact: Heroine can also be used to very easily build high fidelity page transitions, similar to what material calls "Container Transform", including Gesture support! I'm planning to expand on that capability even further in the future, to make it more useful and customizable. #flutterdev

✨ Heroine Update ✨ heroine 0.3.0 is here: pub.dev/packages/her... ⛓️ You can now chain ShuttleBuilders for more complex animations – see the video for a combined flip + fade animation 💍 Less jank: in a few cases a bouncy spring would jump a little upon landing – now it's buttery smooth

Also: if you used heroine in widget tests, you might have noticed that it didn't always dispose its Tickers correctly. That's fixed too! We also have around 60 x the test coverage from before 😅

It seems like a #flutterdev Widget can't reliably access, wether the route that it's in can be popped (see PopScope). ModalRoute.of(context) doesn't notify listeners when its popDisposition changes 🤷 Thus, I can't disable the dismiss gestures in Heroine when a route doesn't want to be popped...

If I started porting #FlutterDev implicitly animated widgets over to spring simulations as part of springster, which ones would you like to see first? (anything that starts with Animated)

View full thread

This is of course still a first release, so some things might not work as expected, and APIs might still change slightly. But go have fun and report your issues!

View full thread

I was so excited to call this package `superhero`, which is available. I didn't know that pub.dev rejects packages if a similar name (`super_hero`) exists. I could just call it `spring_hero`, which is super descriptive, but boring. Does anyone have a cool idea?

Tim@i.madethese.works

I think this might be the coolest single interaction I've ever built in #FlutterDev. Spring-based heroes with gestures make so much sense! It's all shaping up nicely, but I still need to polish some things before a release. Let me know if you have any use-cases you want covered 👀

I really wanna love Bluesky, and a lot of things are great. But the low framerate on uploaded videos really bothers me, since a big part of why I'm here is to post and look at Designs that move 🙈

I think this might be the coolest single interaction I've ever built in #FlutterDev. Spring-based heroes with gestures make so much sense! It's all shaping up nicely, but I still need to polish some things before a release. Let me know if you have any use-cases you want covered 👀

After all my spring-based animation experiments, I have to say I‘ve been converted! I think loads of #FlutterDev apps would feel better if animations were handled using springs instead of curves and durations. 1/2

Devs constantly don’t know how to, or forget to set meaningful curves. I see linear animations a lot, or reverse animations using a curve in reverse that should have been flipped. With spring simulations, everything feels perfectly physical, whatever you do! Plus they redirect way better of course

I released a new #FlutterDev package today! (link further down) #SwiftUI uses dynamically redirecting springs for a lot of interactions, but in Flutter such spring animations have always been quite cumbersome to implement.

Started experimenting with spring-simulation based Hero transitions in #FlutterDev today. It looks very promising, but there are a lot of issues to iron out still 🙈

I released a new #FlutterDev package today! (link further down) #SwiftUI uses dynamically redirecting springs for a lot of interactions, but in Flutter such spring animations have always been quite cumbersome to implement.

View full thread

I released a new #FlutterDev package today! (link further down) #SwiftUI uses dynamically redirecting springs for a lot of interactions, but in Flutter such spring animations have always been quite cumbersome to implement.

The package supports both 1D and 2D spring simulations that automatically redirect, when the intended value changes. It also offers a drop-in replacement for `Draggable` that animates using a spring when let go.

You are up to date.