Add Alignment, which will replace FractionalOffset (flutter#12342)

Unlike FractionalOffset, Alignment uses the center as the zero of the
coordinate system, which makes the RTL math work out much cleaner.

Also, make FractionalOffset into a subclass of Alignment so that clients
can continue to use FractionalOffset.

Author: abarth

packages/flutter/lib/painting.dart

@@ -17,6 +17,7 @@
 ///    painting boxes.
 library painting;
 
+export 'src/painting/alignment.dart';
 export 'src/painting/basic_types.dart';
 export 'src/painting/border_radius.dart';
 export 'src/painting/borders.dart';

packages/flutter/lib/src/cupertino/nav_bar.dart

@@ -416,7 +416,7 @@ class _CupertinoLargeTitleNavigationBarSliverDelegate extends SliverPersistentHe
               child: new OverflowBox(
                 minHeight: 0.0,
                 maxHeight: double.INFINITY,
-                alignment: FractionalOffsetDirectional.bottomStart,
+                alignment: AlignmentDirectional.bottomStart,
                 child: new Padding(
                   padding: const EdgeInsetsDirectional.only(
                     start: _kNavBarEdgePadding,

packages/flutter/lib/src/cupertino/route.dart

@@ -11,21 +11,21 @@ const double _kBackGestureWidth = 20.0;
 const double _kMinFlingVelocity = 1.0; // Screen widths per second.
 
 // Fractional offset from offscreen to the right to fully on screen.
-final FractionalOffsetTween _kRightMiddleTween = new FractionalOffsetTween(
-  begin: FractionalOffset.topRight,
-  end: FractionalOffset.topLeft,
+final AlignmentTween _kRightMiddleTween = new AlignmentTween(
+  begin: Alignment.centerRight * 2.0,
+  end: Alignment.center,
 );
 
 // Fractional offset from fully on screen to 1/3 offscreen to the left.
-final FractionalOffsetTween _kMiddleLeftTween = new FractionalOffsetTween(
-  begin: FractionalOffset.topLeft,
-  end: const FractionalOffset(-1.0/3.0, 0.0),
+final AlignmentTween _kMiddleLeftTween = new AlignmentTween(
+  begin: Alignment.center,
+  end: const Alignment(-2.0/3.0, 0.0),
 );
 
 // Fractional offset from offscreen below to fully on screen.
-final FractionalOffsetTween _kBottomUpTween = new FractionalOffsetTween(
-  begin: FractionalOffset.bottomLeft,
-  end: FractionalOffset.topLeft,
+final AlignmentTween _kBottomUpTween = new AlignmentTween(
+  begin: Alignment.bottomCenter * 2.0,
+  end: Alignment.center,
 );
 
 // Custom decoration from no shadow to page shadow mimicking iOS page
@@ -35,8 +35,8 @@ final DecorationTween _kGradientShadowTween = new DecorationTween(
   end: const _CupertinoEdgeShadowDecoration(
     edgeGradient: const LinearGradient(
       // Spans 5% of the page.
-      begin: const FractionalOffset(0.95, 0.0),
-      end: FractionalOffset.topRight,
+      begin: const Alignment(0.90, 0.0),
+      end: Alignment.centerRight,
       // Eyeballed gradient used to mimic a drop shadow on the left side only.
       colors: const <Color>[
         const Color(0x00000000),
@@ -318,9 +318,9 @@ class CupertinoPageTransition extends StatelessWidget {
       super(key: key);
 
   // When this page is coming in to cover another page.
-  final Animation<FractionalOffset> _primaryPositionAnimation;
+  final Animation<Alignment> _primaryPositionAnimation;
   // When this page is becoming covered by another page.
-  final Animation<FractionalOffset> _secondaryPositionAnimation;
+  final Animation<Alignment> _secondaryPositionAnimation;
   final Animation<Decoration> _primaryShadowAnimation;
 
   /// The widget below this widget in the tree.
@@ -361,7 +361,7 @@ class CupertinoFullscreenDialogTransition extends StatelessWidget {
        ),
        super(key: key);
 
-  final Animation<FractionalOffset> _positionAnimation;
+  final Animation<Alignment> _positionAnimation;
 
   /// The widget below this widget in the tree.
   final Widget child;
@@ -562,7 +562,7 @@ class _CupertinoEdgeShadowDecoration extends Decoration {
       const _CupertinoEdgeShadowDecoration();
 
   /// A gradient to draw to the left of the box being decorated.
-  /// FractionalOffsets are relative to the original box translated one box
+  /// Alignments are relative to the original box translated one box
   /// width to the left.
   final LinearGradient edgeGradient;
 

packages/flutter/lib/src/cupertino/tab_scaffold.dart

@@ -145,7 +145,7 @@ class _CupertinoTabScaffoldState extends State<CupertinoTabScaffold> {
 
     if (widget.tabBar != null) {
       stacked.add(new Align(
-        alignment: FractionalOffset.bottomCenter,
+        alignment: Alignment.bottomCenter,
         // Override the tab bar's currentIndex to the current tab and hook in
         // our own listener to update the _currentPage on top of a possibly user
         // provided callback.

packages/flutter/lib/src/material/app_bar.dart

@@ -448,7 +448,7 @@ class _AppBarState extends State<AppBar> {
     }
 
     appBar = new Align(
-      alignment: FractionalOffset.topCenter,
+      alignment: Alignment.topCenter,
       child: appBar,
     );
 

packages/flutter/lib/src/material/bottom_navigation_bar.dart

@@ -215,14 +215,14 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
     return (leftWeights + _flex(_animations[index]) / 2.0) / allWeights;
   }
 
-  FractionalOffset _circleOffset(int index) {
+  Alignment _circleOffset(int index) {
     final double iconSize = widget.iconSize;
     final Tween<double> yOffsetTween = new Tween<double>(
       begin: (18.0 + iconSize / 2.0) / kBottomNavigationBarHeight, // 18dp + icon center
       end: (6.0 + iconSize / 2.0) / kBottomNavigationBarHeight     // 6dp + icon center
     );
 
-    return new FractionalOffset(
+    return new Alignment(
       _xOffset(index),
       yOffsetTween.evaluate(_animations[index])
     );
@@ -283,10 +283,10 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
                     widget.onTap(i);
                 },
                 child: new Stack(
-                  alignment: FractionalOffset.center,
+                  alignment: Alignment.center,
                   children: <Widget>[
                     new Align(
-                      alignment: FractionalOffset.topCenter,
+                      alignment: Alignment.topCenter,
                       child: new Container(
                         margin: new EdgeInsets.only(
                           top: new Tween<double>(
@@ -304,7 +304,7 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
                       ),
                     ),
                     new Align(
-                      alignment: FractionalOffset.bottomCenter,
+                      alignment: Alignment.bottomCenter,
                       child: new Container(
                         margin: const EdgeInsets.only(bottom: 10.0),
                         child: DefaultTextStyle.merge(
@@ -319,7 +319,7 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
                                 end: 1.0,
                               ).evaluate(_animations[i]),
                             )),
-                            alignment: FractionalOffset.bottomCenter,
+                            alignment: Alignment.bottomCenter,
                             child: widget.items[i].title,
                           ),
                         ),
@@ -352,10 +352,10 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
                     widget.onTap(i);
                 },
                 child: new Stack(
-                  alignment: FractionalOffset.center,
+                  alignment: Alignment.center,
                   children: <Widget>[
                     new Align(
-                      alignment: FractionalOffset.topCenter,
+                      alignment: Alignment.topCenter,
                       child: new Container(
                         margin: new EdgeInsets.only(
                           top: new Tween<double>(
@@ -373,7 +373,7 @@ class _BottomNavigationBarState extends State<BottomNavigationBar> with TickerPr
                       ),
                     ),
                     new Align(
-                      alignment: FractionalOffset.bottomCenter,
+                      alignment: Alignment.bottomCenter,
                       child: new Container(
                         margin: const EdgeInsets.only(bottom: 10.0),
                         child: new FadeTransition(
@@ -465,7 +465,7 @@ class _Circle {
   AnimationController controller;
   CurvedAnimation animation;
 
-  FractionalOffset get offset {
+  Alignment get offset {
     return state._circleOffset(index);
   }
 
@@ -487,11 +487,13 @@ class _RadialPainter extends CustomPainter {
   // bounding rectangle's corners touches the egde of the circle. Drawing a
   // circle beyond this radius is futile since there is no perceivable
   // difference within the cropped rectangle.
-  double _maxRadius(FractionalOffset offset, Size size) {
-    final double dx = offset.dx;
-    final double dy = offset.dy;
-    final double x = (dx > 0.5 ? dx : 1.0 - dx) * size.width;
-    final double y = (dy > 0.5 ? dy : 1.0 - dy) * size.height;
+  double _maxRadius(Alignment alignment, Size size) {
+    final double dx = alignment.x;
+    final double dy = alignment.y;
+    final double halfWidth = size.width / 2.0;
+    final double halfHeight = size.height / 2.0;
+    final double x = halfWidth + dx.abs() * halfWidth;
+    final double y = halfHeight + dy.abs() * halfHeight;
     return math.sqrt(x * x + y * y);
   }
 
@@ -517,20 +519,22 @@ class _RadialPainter extends CustomPainter {
     for (_Circle circle in circles) {
       final Tween<double> radiusTween = new Tween<double>(
         begin: 0.0,
-        end: _maxRadius(circle.offset, size)
+        end: _maxRadius(circle.offset, size),
       );
       final Paint paint = new Paint()..color = circle.color;
       final Rect rect = new Rect.fromLTWH(0.0, 0.0, size.width, size.height);
       canvas.clipRect(rect);
       final double navWidth = math.min(bottomNavMaxWidth, size.width);
+      final double halfNavWidth = navWidth / 2.0;
+      final double halfHeight = size.height / 2.0;
       final Offset center = new Offset(
-        (size.width - navWidth) / 2.0 + circle.offset.dx * navWidth,
-        circle.offset.dy * size.height
+        (size.width - navWidth) / 2.0 + halfNavWidth + circle.offset.x * halfNavWidth,
+        halfHeight + circle.offset.y * halfHeight,
       );
       canvas.drawCircle(
         center,
         radiusTween.lerp(circle.animation.value),
-        paint
+        paint,
       );
     }
   }

packages/flutter/lib/src/material/data_table.dart

@@ -408,7 +408,7 @@ class DataTable extends StatelessWidget {
     label = new Container(
       padding: padding,
       height: _kHeadingRowHeight,
-      alignment: numeric ? FractionalOffset.centerRight : FractionalOffsetDirectional.centerStart,
+      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
       child: new AnimatedDefaultTextStyle(
         style: new TextStyle(
           // TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
@@ -460,7 +460,7 @@ class DataTable extends StatelessWidget {
     label = new Container(
       padding: padding,
       height: _kDataRowHeight,
-      alignment: numeric ? FractionalOffset.centerRight : FractionalOffsetDirectional.centerStart,
+      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
       child: new DefaultTextStyle(
         style: new TextStyle(
           // TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
@@ -774,7 +774,7 @@ class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
       child: new Transform(
         transform: new Matrix4.rotationZ(_orientationOffset + _orientationAnimation.value)
                              ..setTranslationRaw(0.0, _kArrowIconBaselineOffset, 0.0),
-        alignment: FractionalOffset.center,
+        alignment: Alignment.center,
         child: new Icon(
           Icons.arrow_downward,
           size: _kArrowIconSize,

packages/flutter/lib/src/material/drawer.dart

@@ -267,7 +267,7 @@ class DrawerControllerState extends State<DrawerController> with SingleTickerPro
   Widget _buildDrawer(BuildContext context) {
     if (_controller.status == AnimationStatus.dismissed) {
       return new Align(
-        alignment: FractionalOffsetDirectional.centerStart,
+        alignment: AlignmentDirectional.centerStart,
         child: new GestureDetector(
           key: _gestureDetectorKey,
           onHorizontalDragUpdate: _move,
@@ -299,9 +299,9 @@ class DrawerControllerState extends State<DrawerController> with SingleTickerPro
                 ),
               ),
               new Align(
-                alignment: FractionalOffsetDirectional.centerStart,
+                alignment: AlignmentDirectional.centerStart,
                 child: new Align(
-                  alignment: FractionalOffsetDirectional.centerEnd,
+                  alignment: AlignmentDirectional.centerEnd,
                   widthFactor: _controller.value,
                   child: new RepaintBoundary(
                     child: new FocusScope(

packages/flutter/lib/src/material/dropdown.dart

@@ -361,7 +361,7 @@ class DropdownMenuItem<T> extends StatelessWidget {
   Widget build(BuildContext context) {
     return new Container(
       height: _kMenuItemHeight,
-      alignment: FractionalOffset.centerLeft,
+      alignment: Alignment.centerLeft,
       child: child,
     );
   }
@@ -589,7 +589,7 @@ class _DropdownButtonState<T> extends State<DropdownButton<T>> with WidgetsBindi
             // the hint or nothing at all.
             new IndexedStack(
               index: _selectedIndex ?? hintIndex,
-              alignment: FractionalOffset.centerLeft,
+              alignment: Alignment.centerLeft,
               children: items,
             ),
             new Icon(Icons.arrow_drop_down,

packages/flutter/lib/src/material/flexible_space_bar.dart

@@ -92,16 +92,16 @@ class _FlexibleSpaceBarState extends State<FlexibleSpaceBar> {
     return null;
   }
 
-  FractionalOffset _getTitleAlignment(bool effectiveCenterTitle) {
+  Alignment _getTitleAlignment(bool effectiveCenterTitle) {
     if (effectiveCenterTitle)
-      return FractionalOffset.bottomCenter;
+      return Alignment.bottomCenter;
     final TextDirection textDirection = Directionality.of(context);
     assert(textDirection != null);
     switch (textDirection) {
       case TextDirection.rtl:
-        return FractionalOffset.bottomRight;
+        return Alignment.bottomRight;
       case TextDirection.ltr:
-        return FractionalOffset.bottomLeft;
+        return Alignment.bottomLeft;
     }
     return null;
   }
@@ -152,7 +152,7 @@ class _FlexibleSpaceBarState extends State<FlexibleSpaceBar> {
         final double scaleValue = new Tween<double>(begin: 1.5, end: 1.0).lerp(t);
         final Matrix4 scaleTransform = new Matrix4.identity()
           ..scale(scaleValue, scaleValue, 1.0);
-        final FractionalOffset titleAlignment = _getTitleAlignment(effectiveCenterTitle);
+        final Alignment titleAlignment = _getTitleAlignment(effectiveCenterTitle);
         children.add(new Container(
           padding: new EdgeInsetsDirectional.only(
             start: effectiveCenterTitle ? 0.0 : 72.0,