在 flutter 中围绕字母创建圆圈

Question

我试图在字母周围创建一个圆圈，这是我的代码，但它并没有创建一个完美的圆圈

         Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(color: Colors.white, width: 2)),
            child: InkWell(
              child: Text(
                "A",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 15),
              ),
            ),
          ),

我还尝试过容器的高度和宽度，然后隐藏了字母的某些部分。

         Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(color: Colors.white, width: 2)),
            child: InkWell(
              child: Text(
                "A",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 15),
              ),
            ),
          ),

但如果我使用图标小部件而不是文本小部件，它就会创建完美的圆形，

          Container(
            height: 30,
            width: 30,
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                border: Border.all(color: Colors.white, width: 2)),
            child: InkWell(
              child: Text(
                "A",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 15),
              ),
            ),
          )

Answer 1

用这个：

 CircleAvatar(
      backgroundColor: Colors.blue,
      child: Text("A"),
  );
    

您还可以使用 中的许多其他标志CircleAvatar，例如maxRadius或foregroundImage，如下所示：

 CircleAvatar(
      backgroundColor: Colors.blue,
      child: Text("A"),
      maxRadius: 30,
      foregroundImage: NetworkImage("enterImageUrl"),
  );

看起来像这样：

Answer 2

对于容器，您可以使用该shape属性为其赋予圆形形状。

它会是这样的：

Container(
  decoration: BoxDecoration (
     shape: BoxShape.circle,
  ),
child: ....
)