From 0b389fc92e6cd81c4207aa3efcfc3bbf8251c65c Mon Sep 17 00:00:00 2001 From: Greg Spencer Date: Thu, 19 Apr 2018 15:52:40 -0700 Subject: [PATCH] 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. --- .../lib/src/material/circle_avatar.dart | 4 +- .../test/material/circle_avatar_test.dart | 39 +++++++++++++------ 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/flutter/lib/src/material/circle_avatar.dart b/packages/flutter/lib/src/material/circle_avatar.dart index e8d6aa2a4b2..c807e3a1533 100644 --- a/packages/flutter/lib/src/material/circle_avatar.dart +++ b/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 diff --git a/packages/flutter/test/material/circle_avatar_test.dart b/packages/flutter/test/material/circle_avatar_test.dart index 5de7770154d..b3590fcb493 100644 --- a/packages/flutter/test/material/circle_avatar_test.dart +++ b/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));