Avatar Brick

Avatar Brick is a custom avatar can automatically display your abbreviation name when no avatar is available.

Let's get started

1. Avatar with an image

Try the following simple example:

Widget simpleAvatarBrick() =>
    AvatarBrick(
        image: Image.network(
          "https: //images.healthshots.com/healthshots/en/uploads/2020/12/08182549/positive-person.jpg",
          fit: BoxFit.cover,
          height: double.maxFinite,
          width: double.maxFinite,
        )
    );

Note: The image you pass in the image variable can be any type of Image (Image.network , Image.asset, Image.file, Image.memory). The passed Image should be have a fit variable of BoxFit.cover, a height variable of double.maxFinite and a weight variable of double.maxFinite.

2. Avatar with a "name"

If you want to create an avatar can automatically display your abbreviation name. DON'T pass image variable or pass null value. Then pass your name in the name variable like following example:

Widget nameAvatarBrick() =>
    AvatarBrick(
      image: null,
      name: "Jennie Garth",
    );

3. Loading Avatar

If you want to create a loading avatar.DON'T pass any variable or pass the true value to the isLoading variable like the following example:

Widget simpleAvatarBrick() => AvatarBrick(isLoading: true);

Widget nullAvatarBrick() => AvatarBrick();

How to customize?

Customize the avatar size

You can customize the size of the avatar by passing the variable size. Try the following example:

Widget resizeAvatarBrick() =>
    AvatarBrick(
      size: const Size(56, 56),
      image: Image.network(
        "https://www.waldenu.edu/media/5504/seo-2332-bs-glad-dark-skinned-woman-with-a-393146831-1200x675",
        fit: BoxFit.cover,
        height: double.maxFinite,
        width: double.maxFinite,
      ),
    );

Customize colors for avatars without images

You can customize the color of the background, border, abbreviation name. Try the following example:

Widget colorAvatarBrick() =>
    AvatarBrick(
      name: "Avatar Brick",
      backgroundColor: Colors.white,
      nameTextColor: Colors.teal,
      border: Border.all(width: 4, color: Colors.teal),
    );

Customize others

You can customize the radius, border, shadow,... of the image. Try the following example:

Widget otherAvatarBrick() =>
    AvatarBrick(
      radius: 24,
      boxShadows: const [
        BoxShadow(
            color: Colors.black54,
            blurRadius: 8,
            offset: Offset(2, 4))
      ],
      border: Border.all(width: 2, color: Colors.orange),
      image: Image.network(
        "https://media.istockphoto.com/id/1166423321/photo/portrait-business-woman-asian-on-blue-background.webp?b=1&s=170667a&w=0&k=20&c=k4ByeqnhyGUnT4wJm4baVX2mlT46iRSr65i2FwcldAk=",
        fit: BoxFit.cover,
        height: double.maxFinite,
        width: double.maxFinite,
      ),
    );

Thank you for using my package!

See more of my packages here

Contact me: congson99vn@gmail.com | linkedin | github