时间戳

首页 > 解决方案 > 如何在 CircleAvatar 颤振上添加图标

flutter - 如何在 CircleAvatar 颤振上添加图标

问题描述

我想知道如何在 CircleAvatar 上添加像在线图标这样的图标。

我已经写了这段代码，但不知道该怎么做......

 ...
 CircleAvatar(
    backgroundColor: Color(0xff00A3FF),
    radius: 35.0,
    backgroundImage:
    AssetImage("assets/photos/photo-1.jpg"),
), 
SizedBox(height: 7.0),
Text(
     "Michael",
      style: TextStyle(color: Colors.white,: FontWeight.w700),
)
...

在此处输入图像描述

标签： flutter

解决方案

您在这里需要的是一个 Stack 小部件。堆栈小部件允许您将小部件放置在小部件之上（这意味着顺序至关重要）。

在这里，我修改了您的 CircleAvatar 以添加一个绿色的“在线”指示器。确保调整大小等以满足您的需求。

Stack(
  children: [
    CircleAvatar(
      backgroundColor: Color(0xff00A3FF),
      backgroundImage: AssetImage("assets/photos/photo-1.jpg"),
      radius: 35.0,
    ),
    Positioned(
      right: 0,
      bottom: 0,
      child: Container(
        padding: EdgeInsets.all(7.5),
        decoration: BoxDecoration(
          border: Border.all(
          width: 2,
          color: Colors.white
        ),
        borderRadius: BorderRadius.circular(90.0),
        color: Colors.green
        )
      )
    )
  ]
)

推荐阅读