Flutter For Dummies
Book image
Explore Book Buy On Amazon
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.

Flutter animation Little baby.

Flutter size change Little baby.

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.

About This Article

This article is from the book:

About the book author:

Dr. Barry Burd holds an M.S. in Computer Science from Rutgers University and a Ph.D. in Mathematics from the University of Illinois. Barry is also the author of Beginning Programming with Java For Dummies, Java for Android For Dummies, and Flutter For Dummies.

This article can be found in the category: