Flutter Animation: Making Size and Color Changes

With Flutter's Animation class, you're not restricted to moving things. You can control the change of any value you think needs changing. The example you find here illustrates how to make changes to an icon's size and color in Flutter.

Changing a Few Flutter Animation Values

// App0904.dart
import 'package:flutter/material.dart';
import 'App09Main.dart';
extension MyHomePageStateExtension on MyHomePageState {
 Animation getAnimation(AnimationController controller) {
  return Tween(begin: 50.0, end: 250.0).animate(controller)
   ..addListener(() {
    setState(() {});
   });
 }
 Widget buildPositionedWidget() {
  int intValue = animation.value.toInt();
  return Center(
   child: Icon(
    Icons.child_care,
    size: animation.value,
    color: Color.fromRGBO(
     intValue,
     0,
     255 - intValue,
     1.0,
    ),
   ),
  );
 }
}

When the above Flutter app starts running, a small, blue-colored baby face appears on the screen. When the user presses Forward, the baby face grows and turns color from blue to red.

The icon in the code above has two properties whose values can change.

• The size property changes along with value.

The icon grows from 50.0 dps to 250.0 dps.

• As the animation progresses, the color property's redness shrinks and its blueness grows.

If you have experience developing Flutter apps, you may be familiar with Flutter's Color.fromRGBO constructor. The constructor's parameters are int values representing amounts of red, green, and blue and a double value that represents opacity. In the code above, the amount of red increases from 50 to 250, and the amount of blue decreases from 205 to 5.

The moral of this article is, an Animation instance's value can mean anything you want it to mean. In the code you find here, the animation's value controls an icon's size and color.

What value would you like to animate? Rotation? Sound volume? Speed? Curvature? Shadow? Background color? Border shape? Mood? The price of a For Dummies book?

Be creative.

Want to get better at developing Flutter apps? Avoid these ten mistakes.