flutter - 如何在 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,
                  )),
            ]),
      ),
    );
}