Flutter圆形头像带边框

Question

我正在尝试使用Flutter的CircleAvatar小部件创建带有边框的圆形头像，如下所示：

CircleAvatar(
    radius: 30,
    backgroundImage: NetworkImage(url),
  ),

如何给这段代码的结果添加边框？

- Code Error

---

你试过用Container包装它吗？ - Aamil Silawat

我还没有。将尝试将其包装在容器内。 - Code Error

Answer 1

将CircleAvatar widget嵌套在另一个CircleAvatar widget中，然后设置不同的radius和backgroundColor即可实现所需的边框效果。

这是代码片段

CircleAvatar(
    radius: 30,
    backgroundColor: Colors.teal,
    child: CircleAvatar(
      backgroundImage: AssetImage(url),
      radius: 28,
    ),
  ),

代码片段链接

- saki

---

运行得非常完美 :) - Code Error

Answer 2

如评论中所示，一种相当灵活的方法是将其包装在Container中：

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white),
      ),
      child: CircleAvatar(
        // your avatar properties here
      ),
    );
  }

因此，您可以自由定义边框的外观，例如使用Border.all方法的"strokeAlign"属性来定义边框是使用CircleAvatar内部的空间还是外部的空间。

- Sergej Werfel

Answer 3

只使用颜色

CircleAvatar(
        backgroundColor: Colors.red,
        radius: 70.0,
        child: CircleAvatar(
          backgroundColor: Colors.orange,
          radius: 60,
        ),
      ),

当使用本地存储时

CircleAvatar(
        backgroundColor: Colors.white,
        radius: 70,
        child: CircleAvatar(
          backgroundImage: AssetImage("image/bg.jpg"),
          radius: 60,
        ),
      ),

如果使用网络图片

      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 70,
        child: CircleAvatar(
          backgroundImage: NetworkImage(url),
          radius: 60,
        ),
      ),

- Sandeep Pareek

Answer 4

检查this链接。如果不在这里，您将获得代码片段。

代码如下：

CircleAvatar(
              radius: 55,
              backgroundColor: Colors.teal,
              child: CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage('url'),
              ),
            )

- MD Sazid Hasan Dip