github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Greg Spencer 2018-04-19 15:52:40 -07:00 committed by GitHub
parent 9da0ec2736
commit 0b389fc92e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/flutter/lib/src/material/circle_avatar.dart
View File

@ -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

39
packages/flutter/test/material/circle_avatar_test.dart
View File

@ -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));