Animation Builder

The Animation Builder widget is a powerful tool for creating custom animations. It listens to a notifier and rebuilds its child widget whenever the notifier's value changes. This allows you to create complex animations that are driven by application state or user interaction.

Properties

Property
Description

notifier

An expression that provides a value to listen for changes. When this value changes, the child widget of the Animation Builder will be rebuilt. This is typically used with animation controllers or other observable data sources.

Default Properties

The Animation Builder widget supports all three sections of default-properties

Layout

  • width

  • height

  • padding

  • margin

  • align

Appearance

  • bgColor

  • borderRadius

  • border

    • borderWidth

    • borderColor

    • borderType (e.g., solid, dashed)

    • strokeAlign

Interactions

  • onClick — Used to add actions to the Animation Builder widget.

Child of Animation Builder

Slot
Description

child

The widget to be rebuilt whenever the notifier's value changes. The child has access to the animationValue variable, which contains the current value of the notifier.

Best Practices

  • Use the AnimationBuilder to create complex animations that are not possible with the built-in animation widgets.

  • For simple animations, consider using the AnimatedSwitcher or AnimatedContainer widgets instead.

  • Be mindful of performance when using the AnimationBuilder, as it can be expensive to rebuild the child widget on every frame.

Last updated