头像砖

头像砖是一个自定义头像，在没有可用头像时可以自动显示您的缩写姓名。

Icon

开始吧

将包导入到您的项目中

import 'package:avatar_brick/avatar_brick.dart';

1. 带图片的头像

Icon

要将图片传递给头像砖，您可以将图片传递给 `image` 变量，或者使用特定的图片格式（AvatarBrick.network、AvatarBrick.asset、AvatarBrick.file、AvatarBrick.memory）。试试下面的简单示例

Widget simpleAvatarBrick() =>
    AvatarBrick.network(
      src: "https://images.healthshots.com/healthshots/en/uploads/2020/12/08182549/positive-person.jpg",
    );

注意： 如果您将图片传递给 `image` 变量，它应该有一个 `fit` 变量设置为 BoxFit.cover，一个 `height` 变量设置为 double.maxFinite，以及一个 `width` 变量设置为 double.maxFinite。

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,
        )
    );

2. 带“姓名”的头像

Icon

如果您想创建一个可以自动显示您的缩写姓名的头像。请不要传递 `image` 变量或将 `null` 值传递给它。然后像下面的示例一样，在 `name` 变量中传递您的姓名。

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

3. 加载头像

Icon

如果您想创建一个加载头像。请不要传递任何变量，或将 true 值传递给 `isLoading` 变量，如下面的示例所示。

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

Widget nullAvatarBrick() => AvatarBrick();

自定义

您可以通过传递 `size` 变量来定制头像的大小。试试下面的示例

Widget resizeAvatarBrick() =>
    AvatarBrick.network(
      size: const Size(16, 16),
      src: "https://www.waldenu.edu/media/5504/seo-2332-bs-glad-dark-skinned-woman-with-a-393146831-1200x675",
    );

Icon

您可以自定义背景、边框、缩写姓名的颜色。试试下面的示例

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

Icon

您可以自定义图片的半径、边框、阴影等。试试下面的示例

Widget otherAvatarBrick() =>
    AvatarBrick.network(
      radius: 24,
      boxShadows: const [
        BoxShadow(
            color: Colors.black54,
            blurRadius: 8,
            offset: Offset(2, 4))
      ],
      border: Border.all(width: 2, color: Colors.orange),
      src: "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=",
    );

Icon

感谢您使用我的包！

查看我的更多包，请点击这里

联系我：[email protected] | 领英 | GitHub

GitHub

查看 Github