如何在 CircleAvatar 周围放置图标答案

【问题标题】：How to place icons around CircleAvatar如何在 CircleAvatar 周围放置图标
【发布时间】：2020-05-01 18:18:29
【问题描述】：

我正在使用 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，但我没有设法获得效果。有办法吗？

【问题讨论】：

标签： flutter icons frontend

【解决方案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,
                  )),
            ]),
      ),
    );
}

【讨论】：