circle_avatar.dart 3.58 KB
Newer Older
Adam Barth's avatar
Adam Barth committed
1 2 3 4
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/services.dart';
Adam Barth's avatar
Adam Barth committed
6 7 8 9
import 'package:flutter/widgets.dart';

import 'constants.dart';
import 'theme.dart';
10
import 'typography.dart';
Adam Barth's avatar
Adam Barth committed
11

12 13 14
// Examples can assume:
// String userAvatarUrl;

Hixie's avatar
Hixie committed
15 16
/// A circle that represents a user.
///
17
/// Typically used with a user's profile image, or, in the absence of
Hixie's avatar
Hixie committed
18 19 20
/// such an image, the user's initials. A given user's initials should
/// always be paired with the same background color, for consistency.
///
Ian Hickson's avatar
Ian Hickson committed
21 22
/// ## Sample code
///
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
/// If the avatar is to have an image, the image should be specified in the
/// [backgroundImage] property:
///
/// ```dart
/// new CircleAvatar(
///   backgroundImage: new NetworkImage(userAvatarUrl),
/// )
/// ```
///
/// The image will be cropped to have a circle shape.
///
/// If the avatar is to just have the user's initials, they are typically
/// provided using a [Text] widget as the [child] and a [backgroundColor]:
///
/// ```dart
/// new CircleAvatar(
39
///   backgroundColor: Colors.brown.shade800,
40
///   child: new Text('AH'),
Ian Hickson's avatar
Ian Hickson committed
41
/// )
42 43
/// ```
///
44
/// See also:
45
///
46
///  * [Chip], for representing users or concepts in long form.
47 48
///  * [ListTile], which can combine an icon (such as a [CircleAvatar]) with some
///    text for a fixed height list entry.
49
///  * <https://material.google.com/components/chips.html#chips-contact-chips>
50
class CircleAvatar extends StatelessWidget {
51
  /// Creates a circle that represents a user.
52
  const CircleAvatar({
Adam Barth's avatar
Adam Barth committed
53
    Key key,
Hans Muller's avatar
Hans Muller committed
54
    this.child,
Adam Barth's avatar
Adam Barth committed
55
    this.backgroundColor,
56
    this.backgroundImage,
57 58
    this.foregroundColor,
    this.radius: 20.0,
Adam Barth's avatar
Adam Barth committed
59 60
  }) : super(key: key);

61
  /// The widget below this widget in the tree.
62 63 64
  ///
  /// Typically a [Text] widget. If the [CircleAvatar] is to have an image, use
  /// [backgroundImage] instead.
Hans Muller's avatar
Hans Muller committed
65
  final Widget child;
Hixie's avatar
Hixie committed
66 67 68

  /// The color with which to fill the circle. Changing the background
  /// color will cause the avatar to animate to the new color.
69 70
  ///
  /// If a background color is not specified, the theme's primary color is used.
Adam Barth's avatar
Adam Barth committed
71
  final Color backgroundColor;
Hixie's avatar
Hixie committed
72

73 74 75 76 77 78
  /// 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;

79 80
  /// The background image of the circle. Changing the background
  /// image will cause the avatar to animate to the new image.
81 82
  ///
  /// If the [CircleAvatar] is to have the user's initials, use [child] instead.
83 84
  final ImageProvider backgroundImage;

Hixie's avatar
Hixie committed
85 86
  /// The size of the avatar. Changing the radius will cause the
  /// avatar to animate to the new size.
87 88
  ///
  /// Defaults to 20 logical pixels.
Hans Muller's avatar
Hans Muller committed
89
  final double radius;
Adam Barth's avatar
Adam Barth committed
90

91
  @override
Adam Barth's avatar
Adam Barth committed
92
  Widget build(BuildContext context) {
Hans Muller's avatar
Hans Muller committed
93
    final ThemeData theme = Theme.of(context);
94 95 96
    final TextStyle textStyle = backgroundColor != null ?
        new Typography(platform: theme.platform).white.title :
        theme.primaryTextTheme.title;
Adam Barth's avatar
Adam Barth committed
97
    return new AnimatedContainer(
98 99
      width: radius * 2.0,
      height: radius * 2.0,
Adam Barth's avatar
Adam Barth committed
100 101
      duration: kThemeChangeDuration,
      decoration: new BoxDecoration(
102 103
        color: backgroundColor ?? theme.primaryColor,
        image: backgroundImage != null ? new DecorationImage(
104 105
          image: backgroundImage
        ) : null,
106
        shape: BoxShape.circle,
Adam Barth's avatar
Adam Barth committed
107
      ),
108
      child: child != null ? new Center(
109
        child: new DefaultTextStyle(
110
          style: textStyle.copyWith(color: foregroundColor),
111
          child: child,
Hans Muller's avatar
Hans Muller committed
112
        )
113
      ) : null,
Adam Barth's avatar
Adam Barth committed
114 115 116
    );
  }
}