Avatar Brick #

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

Let's get started #

Import the package in your project:

import 'package:avatar_brick/avatar_brick.dart';

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! #

pub.dev: https://pub.dev/packages/avatar_brick

See more of my packages here

Contact me: [email protected] | linkedin | github