如何在 CircleAvatar 周围放置图标

Question

我正在使用 Flutter 开发移动应用程序，我想在 CircleAvatar 周围放置一些小图标。见下方红点：

下面是处理它的代码：

  Widget _createHeader(BuildContext context) {
return UserAccountsDrawerHeader(
  accountEmail: Text(userEmail),
  accountName: Text(userName),
  currentAccountPicture: ClipRRect(
    borderRadius: BorderRadius.circular(110),
    child:
        CircleAvatar(
          backgroundImage: NetworkImage(userImageUrl),
          radius: 60,
          backgroundColor: Colors.transparent,
        ),
    ),
        decoration: BoxDecoration(
          color: Theme.of(context).primaryColor
        ),
);

}

我想让图标跟随圆的圆度，但我不知道如何实现。我试图将 CircleAvatar 包装成 Row 或 Container 但我没有设法获得效果。有办法吗？

Answer 1

我不确定您是否可以将它直接包裹在小部件周围，但您可以结合使用 Stack 和 Positioned 来实现此目的。您需要根据您的要求自定义此示例中的 radius、iconSize 和 distance 变量。

@override
Widget build(BuildContext context) {
    double radius = 40;
    double iconSize = 20;
    double distance = 10;
    return Scaffold(
      body: Center(
        child:
        Stack(
            alignment: Alignment.center,
            overflow: Overflow.visible,
            children: [
              CircleAvatar(
                radius: radius,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              ),
              Positioned(
                  top: -(radius + iconSize + distance),
                  right: 0,
                  bottom: radius,
                  left: 0,
                  child: Icon(
                    Icons.access_alarm,
                    color: Colors.blue,
                    size: iconSize,
                  )),
              Positioned(
                  top: -(iconSize + radius),
                  right: -(radius + iconSize - distance),
                  bottom: iconSize,
                  left: radius,
                  child: Icon(
                    Icons.email,
                    color: Colors.blue,
                    size: iconSize,
                  )),
              Positioned(
                  top: -(radius - distance),
                  right: -(radius + iconSize + distance),
                  bottom: -iconSize,
                  left: radius,
                  child: Icon(
                    Icons.account_balance,
                    color: Colors.blue,
                    size: iconSize,
                  )),
            ]),
      ),
    );
}

如何在 CircleAvatar 周围放置图标

How to place icons around CircleAvatar

icons

frontend

flutter