Question

我想将按钮在CircleAvatar中居中，但是对于较小的半径，它似乎无法正确居中。

                 CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 16,
                    child: IconButton(
                        icon: Icon(Icons.add),
                        color: Colors.white,
                        onPressed: () {

                          }
                        }),
                  ),

这是它的样子：

Answer 1

IconButton具有一些默认填充，请通过删除默认填充来解决此问题。检查下面的代码，它可以正常工作。

CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 16,
          child: IconButton(
            // remove default padding here
            padding: EdgeInsets.zero,
            icon: Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          ),
        ),

代码输出：

Answer 2

您可以使用floatActionButton来实现

Container(
  child: floatingActionButton(
    child: Icon(Icons.add),
  ),
),

希望它会有所帮助..！

Answer 3

CircleAvatar通常用于显示图像，我们可以有一些更好的选择，例如“材质”按钮

   MaterialButton(
              onPressed: () {},
              color: Colors.blue,
              textColor: Colors.white,
              child: Icon(
                Icons.add,
                size: 16,
              ),
              shape: CircleBorder(),
            )

输出：

带有IconButton的CircleAvatar未居中

3 个答案: