FlutterFlow Docs
Search…
⌃K

Widget Animation

Using this action, you can trigger a widget animation inside your app.
Widget Animation

Prerequisites

Before you add this action, define the animation that will run for your widget.

Type of widget animation

Following are the types of actions you can use to control the animation:
  1. 1.
    Start Animation: This starts the animation from the beginning and resumes after it has paused.
  2. 2.
    Stop Animation: This stops the animation.
  3. 3.
    Reset Animation: This stops the animation and brings the widget to its initial state.

Adding Widget Animation action

Follow the steps below to add this action to any widget.
  1. 1.
    Select the widget (e.g., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu)
  3. 3.
    Click + Add Action and then search and select the Widget Animation.
  4. 4.
    Choose Widget Animation and set it to the widget (on which you have defined the animation).
  5. 5.
  6. 6.
    If you select Start Animation:
    1. 1.
      By default, this action is Non Blocking, meaning it will trigger the following action (if any) as soon as it is triggered. If you want to wait until this action is finished before triggering any further action, enable this option.
    2. 2.
      If the animation is paused and you want to resume it from the current state (instead of the beginning), enable the Resume Animation toggle. Note: This only works if the animation is neither completed (not reached its final state) nor it's a looping animation.
    3. 3.
      To repeat the animation, enable Loop Animation.
    4. 4.
      To reverse the animation immediately after it has reached its final state, enable the Reverse Animation toggle.
Tip: If you enable the Loop Animation and Reverse Animation together, it will reverse the animation before looping, creating a boomerang-like effect.
Adding Widget Animation action