Flutter animation example for your next application.

Photo by Shubham Dhage on Unsplash

Animation is an excellent way of giving life to your lifeless application. When you create your app with all the features implemented with clean and efficient code which works flawlessly, don’t forget to give life to it. Animation notifies the user about the actions taking place in your app and also gives it a higher look and feel.

Here, I am going to share a few quick and easy ways of adding animation to your flutter app with a few lines of code. In flutter, there are some widgets which let you create some basic animations without TickerProvider or any complex controller.

This article aims to introduce you to some animation widgets, so I have used the required properties only to reduce the complication.

You can download the starter project to follow along with this article.
Download Starter Project

After downloading run following commands.

git checkout start
flutter pub get

1. Hero widget

This is the most basic yet very useful widget. The hero widget flies the hero from one screen to another i.e. it animates from the source to the destination routes.

The car flies to the next screen when the route changes. Here the car image is a hero.

To make a widget a hero you need to wrap that widget in the Hero widget. The only required property is a tag (other than the child), whose value should be the same in origin and destination.

Example code:

//Wrap the image on login screen in Hero widget
Hero(
    tag: "car",
    child: Image(
    image: AssetImage(Assets.car), 
    height: 100,),
    ),
//Wrap the image on home screen in Hero widget
Hero(
    tag: "car",
    child: Image(
    image: AssetImage(Assets.car), 
    height: 200, 
    width: double.infinity,)
),

2. AnimatedPositioned widget

It animates from one point to another whenever the position of the widget changes.

In the picture you can see when login forms open, the car position changes with animation.

The required property of AnimatedPositioned is child and duration. You need to wrap the widget whose position you want to change and give the duration over which you want to animate the widget. You also need to provide value for the position (left, top, right, left) to animate it.

Example code:

// _showLoginForm is boolean value which toggles when login button is tapped.
// Here bottom position changes with animation  
AnimatedPositioned(
    left: 10,
    duration: const Duration(milliseconds: 500),
    bottom: _showLoginForm  
        ? size.height / 3 + 100 
        : size.height / 3 + 20,
    child: const Hero(
        tag: "car",
        child: Image(
          image: AssetImage(Assets.car),
          height: 100,),
    ),
),

3. AnimatedSwitcher widget

You can switch between widgets with AnimatedSwitcher and give some cool effects other than sudden blinks.

The login form in the example is switched with two buttons.

The only required property of AnimatedSwitcher is duration; over which cross-fade animation will appear. You can provide a child widget which can be changed dynamically. If the changed widget is the same, don’t forget to set a key on both widgets.

Example code:

//Here animated switcher switch between login buttons and login form
AnimatedSwitcher(
  duration: const Duration(milliseconds: 500),
  transitionBuilder: (Widget child, Animation<double> animation){
    return ScaleTransition(scale: animation, child: child,);
},
child: !_showLoginForm ?
    SizedBox(
      width: size.width,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          RoundedButton(
            onPress: (){
            setState(() {
              _showLoginForm = true;
            });
          }, text: "Login Here",),

          RoundedButton(
            onPress: (){
            Navigator.push(context, MaterialPageRoute(builder: (context) => const Home()));
          }, text: "Skip Login", color: Colors.white54, textColor: Colors.black87,),

        ],
      ),
    )
    : LoginForm(
        onCloseButtonTap: (){
            setState(() {
              _showLoginForm = false;
            });
          },
      ),
),

4. AnimatedPhysicalModel widget

It is the animated version of the physical model where you can animate borderRadius and elevation.

The elevation of the price card is changed on tap.

It has six required properties but don’t worry, those are super simple.

Child: This used to define the child for the AnimatedPhysicalModel widget

Shape: This property sets the shape of the shadow

Elevation: This property sets the target z-coordinate relative parent at which to place this physical object.

Color: This property sets the target background color

ShadowColor: This property sets the target shadow color

Duration: This property set the duration of the animation

Example code:

AnimatedPhysicalModel(
  color: Colors.white,
  duration: const Duration(milliseconds: 500),
  elevation: isSelected ? 8.0 : 0.0,
  shadowColor: Colors.black45,
  shape: BoxShape.rectangle,
  child: GestureDetector(
    onTap: tapHandle,
    child: Container(
      padding: const EdgeInsets.only(left: 20, top: 8, bottom: 8),
      margin: const EdgeInsets.all(8),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade300),
          borderRadius: BorderRadius.circular(8)
      ),
      child: SizedBox(
        height: 120,
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(widget.text1, style: Theme.of(context).textTheme.headline5,),
            const SizedBox(height: 4,),
            Text(widget.text2, style: Theme.of(context).textTheme.caption,),
            const Spacer(),
            Text(widget.text3, style: Theme.of(context).textTheme.caption,),
            const SizedBox(height: 4,),
            Text(widget.text4, style: Theme.of(context).textTheme.headline5,),
          ],
        ),
      ),
    ),
  ),
)

Thank you for taking interest in this article. If you enjoyed it, don’t forget to like to hit the clap (👏) button.

To read more about the flutter animation widget you can visit here.