Change CircleAvatar to use BoxFit.cover for images (#16649)

This is a PR giving some love to the abandoned PR #16263 by @harrisonturton

I've added a test, and formatted it to be readable.

Currently the CircleAvatar does not set a fit property on the DecorationImage it uses to paint images. This causes non-square images to not fully cover the circle, which looks pretty bad. This PR sets it to BoxFix.cover.

Fixes #13478.

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

@@ -179,7 +179,9 @@ class CircleAvatar extends StatelessWidget {
       duration: kThemeChangeDuration,
       decoration: new BoxDecoration(
         color: effectiveBackgroundColor,
-        image: backgroundImage != null ? new DecorationImage(image: backgroundImage) : null,
+        image: backgroundImage != null
+          ? new DecorationImage(image: backgroundImage, fit: BoxFit.cover)
+          : null,
         shape: BoxShape.circle,
       ),
       child: child == null

packages/flutter/test/material/circle_avatar_test.dart

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import '../painting/image_data.dart';
+
 void main() {
   testWidgets('CircleAvatar with dark background color', (WidgetTester tester) async {
     final Color backgroundColor = Colors.blue.shade900;
@@ -20,8 +24,7 @@ void main() {
     );
 
     final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
-    expect(box.size.width, equals(100.0));
-    expect(box.size.height, equals(100.0));
+    expect(box.size, equals(const Size(100.0, 100.0)));
     final RenderDecoratedBox child = box.child;
     final BoxDecoration decoration = child.decoration;
     expect(decoration.color, equals(backgroundColor));
@@ -43,8 +46,7 @@ void main() {
     );
 
     final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
-    expect(box.size.width, equals(100.0));
-    expect(box.size.height, equals(100.0));
+    expect(box.size, equals(const Size(100.0, 100.0)));
     final RenderDecoratedBox child = box.child;
     final BoxDecoration decoration = child.decoration;
     expect(decoration.color, equals(backgroundColor));
@@ -53,6 +55,23 @@ void main() {
     expect(paragraph.text.style.color, equals(new ThemeData.fallback().primaryColorDark));
   });
 
+  testWidgets('CircleAvatar with image background', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      wrap(
+        child: new CircleAvatar(
+          backgroundImage: new MemoryImage(new Uint8List.fromList(kTransparentImage)),
+          radius: 50.0,
+        ),
+      ),
+    );
+
+    final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
+    expect(box.size, equals(const Size(100.0, 100.0)));
+    final RenderDecoratedBox child = box.child;
+    final BoxDecoration decoration = child.decoration;
+    expect(decoration.image.fit, equals(BoxFit.cover));
+  });
+
   testWidgets('CircleAvatar with foreground color', (WidgetTester tester) async {
     final Color foregroundColor = Colors.red.shade100;
     await tester.pumpWidget(
@@ -67,8 +86,7 @@ void main() {
     final ThemeData fallback = new ThemeData.fallback();
 
     final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
-    expect(box.size.width, equals(40.0));
-    expect(box.size.height, equals(40.0));
+    expect(box.size, equals(const Size(40.0, 40.0)));
     final RenderDecoratedBox child = box.child;
     final BoxDecoration decoration = child.decoration;
     expect(decoration.color, equals(fallback.primaryColorDark));
@@ -185,8 +203,7 @@ void main() {
     );
 
     final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
-    expect(box.size.width, equals(100.0));
-    expect(box.size.height, equals(100.0));
+    expect(box.size, equals(const Size(100.0, 100.0)));
     final RenderDecoratedBox child = box.child;
     final BoxDecoration decoration = child.decoration;
     expect(decoration.color, equals(backgroundColor));
@@ -208,8 +225,7 @@ void main() {
     );
 
     final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
-    expect(box.size.width, equals(100.0));
-    expect(box.size.height, equals(100.0));
+    expect(box.size, equals(const Size(100.0, 100.0)));
     final RenderDecoratedBox child = box.child;
     final BoxDecoration decoration = child.decoration;
     expect(decoration.color, equals(backgroundColor));
@@ -232,8 +248,7 @@ void main() {
     );
 
     final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
-    expect(box.size.width, equals(100.0));
-    expect(box.size.height, equals(100.0));
+    expect(box.size, equals(const Size(100.0, 100.0)));
     final RenderDecoratedBox child = box.child;
     final BoxDecoration decoration = child.decoration;
     expect(decoration.color, equals(backgroundColor));