Tech

Useful Animation Widgets

The example usage of AnimatedSwitcher, AnimatedOpacity and AnimatedPositioned widgets.

Muhammed IŞIK

Flutter | Mobile Development

Animations are essential part of applications as well as interface design. There are many animation types. I will show some of them on an example. Before show them i need to mention about our example. We have a play/pause button, skip next and skip previous buttons, a duration bar and a text.

In the first case, only play button is visible. When we press play button other components will be visible, play button also will turn into pause button but everthing is animated.

We have a boolean variable which keeps the state of playing. We will control components visibility via this variable. We also have a constant duration which is duration of all animations:

bool isPlaying = false;
final Duration animationDuration = const Duration(milliseconds: 750);

At the beginning, we press play button. At this stage, we need to update isPlaying state:

onTap: () => setState(() => isPlaying = !isPlaying)

Now, play icon button need to turn into pause button animatedly. We achieve this in this way:

AnimatedSwitcher(
  duration: animationDuration,
  child: Icon(
    isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
    key: ValueKey(isPlaying ? 1 : 0)),
),

Key of child widget is needed for AnimatedSwitcher widget to realize it’s child is changed. Without key value, icon changes but animation doesn’t occur.

Another animation widget is AnimatedOpacity. It makes it’s child visible or invisible animatedly:

AnimatedOpacity(
  opacity: isPlaying ? 1.0 : 0.0,
  duration: animationDuration,
  child: Text('Skye Cuillin'),
),

“opacity” represents amount of visibilty. From 1 to 0 visibililty decreases. Visibility or invisibility happens within duration of animation.

The last animation widget is AnimatedPositioned. This widget moves it’s child from one position to another on the screen within a duration of animation. In our example, we have skip buttons. In the first case, they are at a negative position. They will move to their assigned position as long as the state changes:

AnimatedPositioned(
  left: isPlaying ? 0 : -50,
  duration: animationDuration,
  child: const Icon(Icons.skip_previous_rounded),
),

AnimatedPositioned(
  right: isPlaying ? 0 : -50,
  duration: animationDuration,
  child: const Icon(Icons.skip_next_rounded),
),

Preview:
preview.mp4

We are the partners you’ve been searching for.

Tell us about your project.