August CircleAvatar Flutter components checked 】 【 | more challenges

Preface:

This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge. To prepare for the August challenge of the nuggets, I’m going to pick 31 components this month that haven’t been introduced before and do a full analysis and attribute introduction. These articles will be used as important material in the collection of the Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

Familiarize yourself with the CircleAvatar component

Let’s first take a look at what a CircleAvatar means. Many people may think of it as a circle image cropping component. In fact, the source code is introduced: it is a circle on behalf of the user. In the case of Youdao Dictionary, a CircleAvatar is the user’s avatar. In addition, he can set the color and subcomponents, so that when the avatar is not present, it is usually displayed as the color and the first letter of the user name.

1. Circlebasic information about the Avatar

Below is the definition and constructor of the CircleAvatar component class, which you can see inherits from the StatelessWidget. The configuration parameters are mainly the front/background image and color, but also the radius size can be set.

Both foreground and background images are ImageProvider objects that are listened for by an ImageErrorListener, which is triggered if the image loads incorrectly.

final ImageProvider? backgroundImage;
final ImageProvider? foregroundImage;

final ImageErrorListener? onBackgroundImageError;
final ImageErrorListener? onForegroundImageError;

typedef ImageErrorListener = void Function(Object exception, StackTrace? stackTrace);
Copy the code

2. Use of CircleAvatar

As long as you specify the image resources, you can display the circle, through radius can control the size of the circle.

class CircleAvatarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      backgroundImage: AssetImage('assets/images/icon_head.jpg'),
      radius: 40,); }}Copy the code

For example, if the user does not have an avatar, you can use the background color + the user’s first letter as the avatar. Here the foregroundColor represents the foregroundColor, and you can see that this color can be applied to the text component corresponding to the child.

class CircleAvatarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      foregroundColor: Colors.white,
      backgroundColor: Colors.blueAccent,
      radius: 25,
      child: const Text( 'T', style: TextStyle(fontSize: 23),),); }}Copy the code

3. The relationship between foreground picture, background picture and background color

Why set the foreground image, background image, background color and so on when only one piece can be displayed? This suggests that these three must have a shown priority.

According to the source code comment, the order of priority is:

foregroundImage > backgroundImage > backgroundColor
Copy the code

In fact, it is not difficult to understand that there may be errors in the loading of images, especially network images. CircleAvatar, as the user’s logo, should have some flexibility in the event of image errors. That is, if foregroundImage fails, backgroundImage is displayed, and when backgroundColor fails, backgroundColor is displayed. This has a bottom display, rather than a blank, or error, which can be confusing to the user.

4. Animation of CircleAvatar

Many people may not know that circleAvatars are animated. For example, in the following example, after changing RADIUS from 25 to 40, refactor the component, the image is the radius animation gradient to the new value. The animation of CircleAvatar is weak and belongs to the default animation. Users cannot specify animation parameters such as duration and animation curve. This removes flexibility to a certain extent and makes it easier to use.

As we can see from the source code below, CircleAvatar is essentially implemented based on AnimatedContainer, which was introduced in the previous article (see AnimatedContainer).

Second, CircleAvatar source implementation

The fact that it is a StatelessWidget means that it relies on other components to build, and the logic is concentrated in the build method.

At the beginning of the build method, the body data is fetched through Theme. Of, and the text color is set according to the dark light mode.

CircleAvatar is a wind energy implementation based on the AnimatedContainer component, where the front and background images are used in the Decoration and foregroundDecoration properties. The child components are centered and nested IconTheme and DefaultTextStyle to handle text and icon default colors. The default animation duration is kThemeChangeDuration of 200ms.

const Duration kThemeChangeDuration = Duration(milliseconds: 200);
Copy the code

The CircleAvatar is a component that stands on the shoulders of giants and is relatively simple to implement and use. Consider this component if you want to work with rounded user avatars. This is the end of this article. Thanks for watching. See you tomorrow