SlideTransition, FractionalOffset, and Alignment

748 views
Skip to first unread message

Adam Barth

unread,
Oct 3, 2017, 3:42:56 AM10/3/17
to Flutter Dev
# Summary

SlideTransltion now works in terms of Animation<Offset> rather than Animation<FractionalOffset>.  The semantics are the same as before.  You just need to replace the type FractionalOffset with Offset.

Alignment supersedes FractionalOffset and is a better way to specify where you want a child positioned (e.g., Alignment.topLeft, Alignment.center).  FractionalOffset will continue to be supported, and you do not need to update your code.

# Why Alignment?

We've been working on adding support for right-to-left layouts.  As part of that work, many layout-related classes have grown a "directional" variant that adapts to the current TextDirection.  For example, EdgeInsetsDirectional lets you specify padding in terms of "start" and "end" rather than "left" and "right."  In right-to-left, the "start" padding gets applied on the right whereas in left-to-right, the "start" padding gets applied on the left.

In trying to create a "directional" variant of FractionalOffset, we realized that we had made a mistake in the design of FractionalOffset.  The problem is that the origin for FractionalOffset's coordinate system (i.e., FractionalOffset(0.0, 0.0)) is in the top-left corner.  That seems reasonably in left-to-right layouts but has a left-to-right bias.  At first, we tried to correct the bias by placing the origin of the coordinate system in the upper-right corner in right-to-left layouts, but the math just doesn't work out.

Instead, we've resolved the issue by moving the origin of the coordinate system to the center, which is the same location in both left-to-right and right-to-left layouts.  Unfortunately, changing the coordinate system for FractionalOffset would be a breaking change to a fairly widely used type.  Rather than break FractionalOffset, we've introduced a new type, Alignment, that uses the new coordinate system.  Alignment has an AlignmentDirectional variant that you can use to specify alignments in a way that adapts to the current TextDirection.

# Whither FractionalOffset?

To continue to support FractionalOffset, we've made FractionalOffset extend Alignment, which means you can continue to specify alignments (e.g., for the Align widget) using FractionalOffset.  All the operators continue to work with FractionalOffset using the old coordinate system, but if you mix FractionalOffset with an Alignment (e.g., by adding a FractionalOffset to an Alignment), we'll convert the result to the new (center-based) coordinate system.

The net result is that code that currently uses FractionalOffset should continue to work without modification.  For new code, we recommend using Alignment, especially if you want to support right-to-left languages (or might want to support them in the future).

# Why change SlideTransltion?

Previously, SlideTransltion used Animation<FractionalOffset>, but that really was an abuse of the FractionalOffset type.  For example, in order to make a SlideTransltion that ended with a zero displacement, you needed to specify that the end point for your animation was FractionalOffset.topLeft.  Converting SlideTransltion to Alignment made this awkwardness worse because now a zero displacement was specified as Alignment.center.

Instead, we've decided to make a breaking change to SlideTransition to switch the type of the position argument from Animation<FractionalOffset> to Animation<Offset>.  The semantics of the position aren't changing, just the type.  Essentially, the Offset is scaled by the size of the child before being applied as a translation.  For example, if the Offset is (dx, dy), then the change is actually translated by (dx * child.width, dy * child.height), just as before.

To update your code, simply replace the type FractionalOffset with Offset.  If you were using some of the named FractionalOffset constants, you can jump to the definition to see what numerical values those constants use.

# Conclusion

Please let me know if you have any questions or if you're having any trouble with these changes.

Thanks and happy aligning,
Adam

Reply all
Reply to author
Forward
0 new messages