Как разместить иконки вокруг 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,
                  )),
            ]),
      ),
    );
}