firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements to CircleAvatar text color (for #8895 codelab) (#8936)

Browse Source 
* Improvements to CircleAvatar default color (for codelab)

* use a transparent white instead of a solid one

* Fix analyzer errors

* fix tests
This commit is contained in:
Collin Jackson 2017-03-22 13:23:14 -07:00 committed by GitHub
parent 3f4cb1fe8c
commit f47cde441e
2 changed files with 78 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import 'package:flutter/widgets.dart';
import 'constants.dart';
import 'theme.dart';
import 'typography.dart';
/// A circle that represents a user.
///
@ -48,7 +49,8 @@ class CircleAvatar extends StatelessWidget {
this.child,
this.backgroundColor,
this.backgroundImage,
this.radius: 20.0
this.foregroundColor,
this.radius: 20.0,
}) : super(key: key);
/// The widget below this widget in the tree.
@ -59,8 +61,16 @@ class CircleAvatar extends StatelessWidget {
/// The color with which to fill the circle. Changing the background
/// color will cause the avatar to animate to the new color.
///
/// If a background color is not specified, the theme's primary color is used.
final Color backgroundColor;
/// The default text color for text in the circle.
///
/// Falls back to white if a background color is specified, or the primary
/// text theme color otherwise.
final Color foregroundColor;
/// The background image of the circle. Changing the background
/// image will cause the avatar to animate to the new image.
///
@ -76,13 +86,15 @@ class CircleAvatar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final Color color = backgroundColor ?? theme.primaryColor;
final TextStyle textStyle = backgroundColor != null ?
new Typography(platform: theme.platform).white.title :
theme.primaryTextTheme.title;
return new AnimatedContainer(
width: radius * 2.0,
height: radius * 2.0,
duration: kThemeChangeDuration,
decoration: new BoxDecoration(
backgroundColor: color,
backgroundColor: backgroundColor ?? theme.primaryColor,
backgroundImage: backgroundImage != null ? new BackgroundImage(
image: backgroundImage
) : null,
@ -90,7 +102,7 @@ class CircleAvatar extends StatelessWidget {
),
child: child != null ? new Center(
child: new DefaultTextStyle(
style: theme.primaryTextTheme.title,
style: textStyle.copyWith(color: foregroundColor),
child: child,
)
) : null,

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

@ -3,24 +3,79 @@
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('CircleAvatar test', (WidgetTester tester) async {
testWidgets('CircleAvatar with background color', (WidgetTester tester) async {
final Color backgroundColor = Colors.blue.shade400;
await tester.pumpWidget(
new Center(
child: new CircleAvatar(
backgroundColor: Colors.blue[400],
backgroundColor: backgroundColor,
radius: 50.0,
child: new Text('Z')
)
)
child: new Text('Z'),
),
),
);
final RenderBox box = tester.renderObject(find.byType(CircleAvatar));
final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
expect(box.size.width, equals(100.0));
expect(box.size.height, equals(100.0));
final RenderDecoratedBox child = box.child;
final BoxDecoration decoration = child.decoration;
expect(decoration.backgroundColor, equals(backgroundColor));
expect(find.text('Z'), findsOneWidget);
final RenderParagraph paragraph = tester.renderObject(find.text('Z'));
expect(paragraph.text.style.color, equals(Colors.white));
});
testWidgets('CircleAvatar with foreground color', (WidgetTester tester) async {
final Color foregroundColor = Colors.red.shade100;
await tester.pumpWidget(
new Center(
child: new CircleAvatar(
foregroundColor: foregroundColor,
child: new Text('Z'),
),
),
);
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));
final RenderDecoratedBox child = box.child;
final BoxDecoration decoration = child.decoration;
expect(decoration.backgroundColor, equals(fallback.primaryColor));
final RenderParagraph paragraph = tester.renderObject(find.text('Z'));
expect(paragraph.text.style.color, equals(foregroundColor));
});
testWidgets('CircleAvatar with theme', (WidgetTester tester) async {
final ThemeData theme = new ThemeData(
primaryColor: Colors.grey.shade100,
primaryColorBrightness: Brightness.light,
);
await tester.pumpWidget(
new Theme(
data: theme,
child: new Center(
child: new CircleAvatar(
child: new Text('Z'),
),
),
),
);
final RenderConstrainedBox box = tester.renderObject(find.byType(CircleAvatar));
final RenderDecoratedBox child = box.child;
final BoxDecoration decoration = child.decoration;
expect(decoration.backgroundColor, equals(theme.primaryColor));
final RenderParagraph paragraph = tester.renderObject(find.text('Z'));
expect(paragraph.text.style.color, equals(theme.primaryTextTheme.title.color));
});
}