Flutter：如何在 CircleAvatar 上放置图标并使其居中？

Question

我想将相机图标居中，但我做不到。我尝试使用图像而不是图标，但这仍然不起作用。我认为它不起作用，因为不可能在 CircleAvatar 上放置图标，但必须有办法做到这一点。 这是我的代码：

    return SizedBox(
      height: 115,
      width: 115,
      child: Stack(
        clipBehavior: Clip.none,
        fit: StackFit.expand,
        children: [
          CircleAvatar(
            backgroundImage: AssetImage("assets/images/Profile Image.png"),
          ),
          Positioned(
              right: -16,
              bottom: 0,
              child: SizedBox(
                  height: 46,
                  width: 46,
                  child: FlatButton(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                      side: BorderSide(color: Colors.white),
                    ),
                    color: Color(0xFFF5F6F9),
                    onPressed: () {},
                    // TODO: Icon not centered.
                    child: Center(child: Icon(Icons.camera_alt_outlined)),
                  )))
        ],
      ),
    );

Answer 1

Widget build(BuildContext context) {
    return SizedBox(
      height: 115,
      width: 115,
      child: Stack(
        clipBehavior: Clip.none,
        fit: StackFit.expand,
        children: [
          CircleAvatar(
            backgroundImage: AssetImage("assets/images/Profile Image.png"),
          ),
          Positioned(
              bottom: 0,
              right: -25,
              child: RawMaterialButton(
                onPressed: () {},
                elevation: 2.0,
                fillColor: Color(0xFFF5F6F9),
                child: Icon(Icons.camera_alt_outlined, color: Colors.blue,),
                padding: EdgeInsets.all(15.0),
                shape: CircleBorder(),
              )),
        ],
      ),
    );
  }

我删除了 SizedBox 并使用了 RawMaterialButton。

Answer 2

与其使用 CircleAvatar，不如使用这样的容器：

 Container(
                  height: 46,
                  width: 46,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green,
                  ),
                  child: Icon(Icons.camera, color: Colors.white,),
                  alignment: Alignment.center,
                ),

Answer 3

试试这个

CircleAvatar(
  radius: 58,
  backgroundImage: AssetImage("assets/images/Profile Image.png"),
  child: Stack(
    children: [
       Align(
          alignment: Alignment.bottomRight,
          child: CircleAvatar(
            radius: 18,
            backgroundColor: Colors.white70,
            child: Icon(CupertinoIcons.camera),
          ),
       ),
    ]
  ),
)

Answer 4

尝试这两件事

您可以使用定位小部件包裹您的图标，然后为其设置左上右尺寸。

再次用 Align 小部件换行，然后设置对齐方式：Alignment.center

Answer 5

试试这个:) 定位（ 底部：0， 右：0， 孩子：墨水井（ 点击: () { 显示ModalBottomSheet(); }, 子项：容器（ 装饰：BoxDecoration( borderRadius: BorderRadius.circular(50), 颜色: 颜色.白色, boxShadow: const [ BoxShadow（颜色：Colors.grey，blurRadius：10） ], ), 身高：30， 宽度：30， 孩子：常量图标（ 图标.camera_alt, 颜色: 颜色.灰色, ), ), ), )