Merge pull request #484 from abarth/image_alignment

Add `alignment` to image widgets

packages/flutter/lib/src/painting/box_painter.dart

@@ -582,8 +582,8 @@ void paintImage({
   ImageFit fit,
   repeat: ImageRepeat.noRepeat,
   Rect centerSlice,
-  double positionX: 0.5,
-  double positionY: 0.5
+  double alignX,
+  double alignY
 }) {
   Size outputSize = rect.size;
   Size inputSize = new Size(image.width.toDouble(), image.height.toDouble());
@@ -644,8 +644,8 @@ void paintImage({
   Paint paint = new Paint()..isAntiAlias = false;
   if (colorFilter != null)
     paint.colorFilter = colorFilter;
-  double dx = (outputSize.width - destinationSize.width) * positionX;
-  double dy = (outputSize.height - destinationSize.height) * positionY;
+  double dx = (outputSize.width - destinationSize.width) * (alignX ?? 0.5);
+  double dy = (outputSize.height - destinationSize.height) * (alignY ?? 0.5);
   Point destinationPosition = rect.topLeft + new Offset(dx, dy);
   Rect destinationRect = destinationPosition & destinationSize;
   if (centerSlice == null)

packages/flutter/lib/src/rendering/image.dart

@@ -24,6 +24,7 @@ class RenderImage extends RenderBox {
     double height,
     ColorFilter colorFilter,
     ImageFit fit,
+    FractionalOffset alignment,
     repeat: ImageRepeat.noRepeat,
     Rect centerSlice
   }) : _image = image,
@@ -31,6 +32,7 @@ class RenderImage extends RenderBox {
       _height = height,
       _colorFilter = colorFilter,
       _fit = fit,
+      _alignment = alignment,
       _repeat = repeat,
       _centerSlice = centerSlice;
 
@@ -86,6 +88,16 @@ class RenderImage extends RenderBox {
     markNeedsPaint();
   }
 
+  /// How to align the image within its bounds.
+  FractionalOffset get alignment => _alignment;
+  FractionalOffset _alignment;
+  void set alignment (FractionalOffset value) {
+    if (value == _alignment)
+      return;
+    _alignment = value;
+    markNeedsPaint();
+  }
+
   /// Not yet implemented.
   ImageRepeat get repeat => _repeat;
   ImageRepeat _repeat;
@@ -194,6 +206,8 @@ class RenderImage extends RenderBox {
       image: _image,
       colorFilter: _colorFilter,
       fit: _fit,
+      alignX: _alignment?.x,
+      alignY: _alignment?.y,
       centerSlice: _centerSlice,
       repeat: _repeat
     );

packages/flutter/lib/src/widgets/basic.dart

@@ -1021,6 +1021,7 @@ class Image extends LeafRenderObjectWidget {
     this.height,
     this.colorFilter,
     this.fit,
+    this.alignment,
     this.repeat: ImageRepeat.noRepeat,
     this.centerSlice
   }) : super(key: key);
@@ -1030,6 +1031,7 @@ class Image extends LeafRenderObjectWidget {
   final double height;
   final ColorFilter colorFilter;
   final ImageFit fit;
+  final FractionalOffset alignment;
   final ImageRepeat repeat;
   final Rect centerSlice;
 
@@ -1039,6 +1041,7 @@ class Image extends LeafRenderObjectWidget {
     height: height,
     colorFilter: colorFilter,
     fit: fit,
+    alignment: alignment,
     repeat: repeat,
     centerSlice: centerSlice);
 
@@ -1047,6 +1050,7 @@ class Image extends LeafRenderObjectWidget {
     renderObject.width = width;
     renderObject.height = height;
     renderObject.colorFilter = colorFilter;
+    renderObject.alignment = alignment;
     renderObject.fit = fit;
     renderObject.repeat = repeat;
     renderObject.centerSlice = centerSlice;
@@ -1061,6 +1065,7 @@ class ImageListener extends StatefulComponent {
     this.height,
     this.colorFilter,
     this.fit,
+    this.alignment,
     this.repeat: ImageRepeat.noRepeat,
     this.centerSlice
   }) : super(key: key) {
@@ -1072,6 +1077,7 @@ class ImageListener extends StatefulComponent {
   final double height;
   final ColorFilter colorFilter;
   final ImageFit fit;
+  final FractionalOffset alignment;
   final ImageRepeat repeat;
   final Rect centerSlice;
 
@@ -1111,6 +1117,7 @@ class _ImageListenerState extends State<ImageListener> {
       height: config.height,
       colorFilter: config.colorFilter,
       fit: config.fit,
+      alignment: config.alignment,
       repeat: config.repeat,
       centerSlice: config.centerSlice
     );
@@ -1125,6 +1132,7 @@ class NetworkImage extends StatelessComponent {
     this.height,
     this.colorFilter,
     this.fit,
+    this.alignment,
     this.repeat: ImageRepeat.noRepeat,
     this.centerSlice
   }) : super(key: key);
@@ -1134,6 +1142,7 @@ class NetworkImage extends StatelessComponent {
   final double height;
   final ColorFilter colorFilter;
   final ImageFit fit;
+  final FractionalOffset alignment;
   final ImageRepeat repeat;
   final Rect centerSlice;
 
@@ -1144,6 +1153,7 @@ class NetworkImage extends StatelessComponent {
       height: height,
       colorFilter: colorFilter,
       fit: fit,
+      alignment: alignment,
       repeat: repeat,
       centerSlice: centerSlice
     );
@@ -1178,6 +1188,7 @@ class RawImage extends StatelessComponent {
     this.height,
     this.colorFilter,
     this.fit,
+    this.alignment,
     this.repeat: ImageRepeat.noRepeat,
     this.centerSlice
   }) : super(key: key);
@@ -1187,6 +1198,7 @@ class RawImage extends StatelessComponent {
   final double height;
   final ColorFilter colorFilter;
   final ImageFit fit;
+  final FractionalOffset alignment;
   final ImageRepeat repeat;
   final Rect centerSlice;
 
@@ -1198,6 +1210,7 @@ class RawImage extends StatelessComponent {
       height: height,
       colorFilter: colorFilter,
       fit: fit,
+      alignment: alignment,
       repeat: repeat,
       centerSlice: centerSlice
     );
@@ -1213,6 +1226,7 @@ class AssetImage extends StatelessComponent {
     this.height,
     this.colorFilter,
     this.fit,
+    this.alignment,
     this.repeat: ImageRepeat.noRepeat,
     this.centerSlice
   }) : super(key: key);
@@ -1223,6 +1237,7 @@ class AssetImage extends StatelessComponent {
   final double height;
   final ColorFilter colorFilter;
   final ImageFit fit;
+  final FractionalOffset alignment;
   final ImageRepeat repeat;
   final Rect centerSlice;
 
@@ -1233,6 +1248,7 @@ class AssetImage extends StatelessComponent {
       height: height,
       colorFilter: colorFilter,
       fit: fit,
+      alignment: alignment,
       repeat: repeat,
       centerSlice: centerSlice
     );