Physical UI Resources

Tim

Jesper

Flutter Packages

Here are some Flutter packages that can help you implement advanced UI effects and animations in your own applications.

Animation and Motion

  • motor: A unified motion system for Flutter that brings together physics-based springs and duration-based curves under a single, consistent API. It's designed to help create natural and responsive animations.
  • heroine: This package provides smooth, spring-based hero transitions. It offers features like drag-to-dismiss gestures and customizable transition effects.
  • stupid_simple_sheet: An experimental sheet library backed by motor that supports dragging and scrolling without headaches.
  • animated_to: Enables widgets to change its position with animation when its position is updated for any reason, typically for rebuilding.

Visual Effects

  • halofoil: Highly customizable Flutter widget that adds a dynamic, interactive holographic foil effect to its children. Simulates iridescence and texture, reacting beautifully to tilt angles and offsets.
  • liquid_glass_renderer: A POC Flutter package for creating a "liquid glass" effect, not ready for production quite yet. It allows you to transform widgets into customizable glass-like surfaces with features like realistic refraction and blending.
  • Shader Gallery A collection of shaders made to work with Flutter

Further Reading

UI/UX and Design Philosophy

  • Physicality: the new age of UI: An article by the co-founder of the Lux camera app, exploring the concept of "physicality" in UI design. It discusses how interfaces are evolving to feel more tangible and responsive, envisioning a future of "living glass" that blurs the line between the digital and physical worlds.

For visual learners, these talks provide in-depth explanations and live coding demonstrations of key Flutter concepts.

Custom RenderObjects

  • Flutter, Flame, and Fragment Shaders:
    Goes deeper into painting, RenderObject and shaders where we ran out of time. (Link will be added once Fluttercon uploads the talk)
  • How Flutter Works: The RenderObject #DecodingFlutter (5/6): In Episode 5 of "How Flutter Works," Craig walks through a full day in the life of a RenderObject. Building on the concepts from Episode 4, this video explains the core responsibilities of RenderObjects: layout, painting, hit testing, and accessibility. Craig demystifies how constraints flow down the render tree, how sizes come back up, and how parent RenderObjects set their children's positions.
  • How Custom RenderObjects can make your life easier: A talk from Droidcon that provides a hands-on introduction to RenderObjects in Flutter, moving beyond theory to practical application.

CustomPainter