Tween (Technique of the Week)

[MUSIC PLAYING] SPEAKER: Animations are one of the best tools in a designer's toolbox for building fun, accessible UIs. Instead of instantly making a change in a single frame, animations help to ease the users into UI changes as an app gradually evolves from its previous state to its new state. To animate something, you need to provide a different value to the property that's being animated at each frame. Over time, it gradually changes from the starting value to the ending value. But how do you calculate each value in between the starting state and the ending state? You use a tween. A tween is an object that helps you smoothly transition from one point, the starting value, to another, the ending value, over a set number of intervals. In other words, tween helps you define all the values in between an animation's start and end values. Say you're animating the color of a container from blue to red over a three-second period. You need to provide the exact color value that should be displayed for every frame over that three-second duration. Flutter aims to render 60 frames per second on a typical device, so an animation that lasts three seconds needs to calculate 180 unique color values. And tweens can help you with more than just colors. The most common types to use with tweens are number types, ints, and doubles. Consider animating the size of some text from 16 points to 32 points over three seconds. To do so, create a tween object that has a type argument of double. Provide a begin and end value. Then use the animate method to create an animation object. The animation object calculates a new double value at each fixed interval during the animation period based on the tween's properties. Then pass the animation object's value property to your text's text size argument. Flutter also provides other tween subclasses, like ColorTween and OffsetTween, to calculate more complex values at fixed intervals. For more info on tweens, animations, and other Flutter techniques, head to flutter.dev. [MUSIC PLAYING]

Channel: Flutter

Views: 46,572

Keywords: pr_pr: Flutter;, Campaign: FL: TechniqueoftheWeek;, type: DevByte Video;, gds:Yes;, Technique of the week, flutter technique, flutter technique of the week, flutter latest, flutter updates, flutter developer, flutter developers, widget of the week, flutter widget of the week, flutter, google

Id: fatb7Clc0MM

Length: 2min 27sec (147 seconds)

Published: Mon Jun 03 2024