如何在图标旁边放置一个点？

Question

嗨，我是否知道是否可以将边距或填充设置为更接近 iconUser，我想在 iconUser 顶部获得圆形形状，已尝试设置边距或填充但仍然无法解决此问题。

   children: <Widget>[
                    SizedBox(width: 10,),
                    GestureDetector(
                      onTap: (){},
                      child: Image.asset("assets/ic_user_center.png",height: 16.0,width: 16.0,)
                    )
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white
                    ),
                  ),
                )
              ],
            ),

Answer 1

您可以使用 Stack 和 Positioned 来指定要放置白点的位置

Answer 2

@override
Widget build(BuildContext context) {
  var radius = 20.0;

  return Scaffold(
    body: Center(
      child: SizedBox.fromSize(
        size: Size.fromRadius(radius),
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            FittedBox(
              child: Icon(
                Icons.account_circle,
                color: Colors.red,
              ),
            ),
            Positioned(
              right: 0,
              child: Container(
                decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
                width: radius / 2,
                height: radius / 2,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

除了

Positioned

，您还可以将

Align

与

alignment: Alignment.topRight

一起使用

Answer 3

如果您使用图像而不是图标，则不必使用堆栈将点放在右上角。

Container(
   width: 48,
   height: 48,
   decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.grey,
      image: DecorationImage(
         image: NetworkImage(imageUrl),
         fit: BoxFit.cover,
      ),
   ),
   child: Align(
      alignment: Alignment.topRight,
      child: Container(
         width: 20,
         height: 20,
         decoration: BoxDecoration(
         shape: BoxShape.circle,
         color: isOnline
            ? const Color(0xFF44B513)
            : Colors.grey,
         border: const Border.fromBorderSide(
            BorderSide(color: Colors.white, width: 3),
         ),
      ),
   ),
),

Answer 4

我建议探索徽章包 这将有助于轻松显示在线状态、已验证的个人资料标签、未读消息计数或任何其他内容。