Flutter AnimatedSwitcher Widget | 3 minute Flutter Animation

Flutter AnimatedSwitcher Widget

Flutter AnimatedSwitcher widget gives an interface to perform Transition between one widget to another. The animation can be easily controlled through this widget and is very easy to set up also.

This widget by default does a FadeTransition between a new widget and the widget previously set on the AnimatedSwitcher as a child. If they are swapped fast enough, then no animation appears, thus it’s important to use the duration parameter to control this animation on the widget(More of this below)

Also, note that, if the Widget’s new child and the old child, have the same key even though there are the difference is properties, the animation won’t work. This is because the framework identifies a new Widget is generated only through the key attribute. To force the transition to occur, set a Key on each child widget that you wish to be considered unique (typically a ValueKey on the widget data that distinguishes this child from the others).

In the upcoming sections, we will look at the AnimatedSwitcher Widget and all the related properties. Make sure to understand the different properties and the basics of using the Animated Switcher widget to effectively use it.

AnimatedSwitcher Widget
AnimatedSwitcher Widget

AnimatedSwitcher – Basics

In order to create an inbound/outbound animation on the widget, use the following class.

AnimatedSwitcher()

The most important property of this class is the duration property. We will see more about that in the next section.

Note: Remember to give a unique key to the child property of the AnimatedSwitcher always.

AnimatedSwitcher Properties

There are several properties that are tagged with the AnimatedSwitcher class. The important properties are listed below,

child – The current child widget to display. If there was a previous child, then that child will be faded out using the switchOutCurve, while the new child is faded in with the switchInCurve.

duration – The duration of the transition from the old child value to the new one. Use the Duration class to give its value effectively.

reverseDuration – The duration of the transition from the new child value to the old one. Make sure to give it a Duration class as its value.

switchInCurve The animation curve to use when transitioning in a new child. It takes in a Curve class as its value.

switchOutCurve – The animation curve to use when transitioning a previous child out. Takes in a Curve class as its value.

transitionBuilder – This is a simple property that lets us decide the actual transition animation that has to be applied to the child(From the old child to the new child). In order to effectively use this property, we must consider it as a function that wraps a new child with an animation that transitions the child in when the animation runs in the forward direction and out when the animation runs in the reverse direction. Note that, this is only called when a new child is set (not for each build), or when a new transitionBuilder is set. If a new transitionBuilder is set, then the transition is rebuilt for the current child and all previous children using the new transitionBuilder. The function must not return null.

In the next section, we will see a detailed example application containing the use of this Animated switcher widget. Make sure to run this on your Android Studio IDE and determine the Animation to yourself.

 

Flutter AnimatedSwitcher Widget – Example App

import 'package:flutter/material.dart';

void main() => runApp(

    MaterialApp(
      title: 'Animated Switcher App',
      home: AnimatedSwitcherApp(),
    )
);

class AnimatedSwitcherApp extends StatefulWidget {

  @override
  _AnimatedSwitcherAppState createState() => _AnimatedSwitcherAppState();
}

class _AnimatedSwitcherAppState extends State<AnimatedSwitcherApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Animated Switcher"),),
      body: Column(
        children: <Widget>[
          AnimatedSwitcher(
            transitionBuilder: (Widget child, Animation<double> animation){
              return ScaleTransition(child: child, scale: animation,);
            },
            child: Text(
                '$count',
                 key: ValueKey<int>(count),
                 style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.bold),
            ),
            duration: const Duration(milliseconds: 500),
          ),
          FlatButton(child: Text("Click here", style: TextStyle(fontSize: 50.0),),
          onPressed: (){
            setState(() {
              count += 1;
            });
          },
          )
        ],
      ),
    );
  }
}

Example Application looks like,

AnimatedSwitcher Widget Example
AnimatedSwitcher Widget Example

Conclusion

The AnimatedSwitcher widget can be effectively used to perform simple transition animation between widgets easily. However, be aware of the fact that it does become a costly operation if lot of various transitions are involved. Hence, use it effectively and not overkill the animations. Apart from the UX appeal of the Flutter App, it also has performance issues(Too many transitions slow down the app).

Leave a Comment

Your email address will not be published. Required fields are marked *