Commit f47cde44 authored by Collin Jackson's avatar Collin Jackson Committed by GitHub

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

* Improvements to CircleAvatar default color (for codelab)

* use a transparent white instead of a solid one

* Fix analyzer errors

* fix tests
parent 3f4cb1fe
...@@ -7,6 +7,7 @@ import 'package:flutter/widgets.dart'; ...@@ -7,6 +7,7 @@ import 'package:flutter/widgets.dart';
import 'constants.dart'; import 'constants.dart';
import 'theme.dart'; import 'theme.dart';
import 'typography.dart';
/// A circle that represents a user. /// A circle that represents a user.
/// ///
...@@ -48,7 +49,8 @@ class CircleAvatar extends StatelessWidget { ...@@ -48,7 +49,8 @@ class CircleAvatar extends StatelessWidget {
this.child, this.child,
this.backgroundColor, this.backgroundColor,
this.backgroundImage, this.backgroundImage,
this.radius: 20.0 this.foregroundColor,
this.radius: 20.0,
}) : super(key: key); }) : super(key: key);
/// The widget below this widget in the tree. /// The widget below this widget in the tree.
...@@ -59,8 +61,16 @@ class CircleAvatar extends StatelessWidget { ...@@ -59,8 +61,16 @@ class CircleAvatar extends StatelessWidget {
/// The color with which to fill the circle. Changing the background /// The color with which to fill the circle. Changing the background
/// color will cause the avatar to animate to the new color. /// 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; 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 /// The background image of the circle. Changing the background
/// image will cause the avatar to animate to the new image. /// image will cause the avatar to animate to the new image.
/// ///
...@@ -76,13 +86,15 @@ class CircleAvatar extends StatelessWidget { ...@@ -76,13 +86,15 @@ class CircleAvatar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final ThemeData theme = Theme.of(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( return new AnimatedContainer(
width: radius * 2.0, width: radius * 2.0,
height: radius * 2.0, height: radius * 2.0,
duration: kThemeChangeDuration, duration: kThemeChangeDuration,
decoration: new BoxDecoration( decoration: new BoxDecoration(
backgroundColor: color, backgroundColor: backgroundColor ?? theme.primaryColor,
backgroundImage: backgroundImage != null ? new BackgroundImage( backgroundImage: backgroundImage != null ? new BackgroundImage(
image: backgroundImage image: backgroundImage
) : null, ) : null,
...@@ -90,7 +102,7 @@ class CircleAvatar extends StatelessWidget { ...@@ -90,7 +102,7 @@ class CircleAvatar extends StatelessWidget {
), ),
child: child != null ? new Center( child: child != null ? new Center(
child: new DefaultTextStyle( child: new DefaultTextStyle(
style: theme.primaryTextTheme.title, style: textStyle.copyWith(color: foregroundColor),
child: child, child: child,
) )
) : null, ) : null,
......
...@@ -3,24 +3,79 @@ ...@@ -3,24 +3,79 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
void main() { 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( await tester.pumpWidget(
new Center( new Center(
child: new CircleAvatar( child: new CircleAvatar(
backgroundColor: Colors.blue[400], backgroundColor: backgroundColor,
radius: 50.0, 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.width, equals(100.0));
expect(box.size.height, 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));
}); });
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment