如何在Flutter中制作一个圆角相机预览。

Question

我的目标是在相机预览中创建圆形形状。我尝试设置一个Container并将其Boxshape设置为circle，然后将Child设置为CameraPreview()。但是它没有成功。所以我尝试在CircleAvatar()中设置CameraPreview()，但也没有成功。有人有解决方法吗？

- Nader Khaled

Answer 1

使用ClipRRect将相机预览进行包装，并定义其border-radius属性以确定圆角的曲率：

ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(8.0),
        topRight: Radius.circular(8.0),
        bottomRight: Radius.circular(8.0),
        bottomLeft: Radius.circular(8.0),

      ),
      child: AspectRatio(
        aspectRatio: 1,
        child: CameraPreview(controller),

      ),
    )

- K.chim

---

不必为每个角落都这样做，你可以使用 borderRadius: BorderRadius.all(Radius.circular(8)) 来实现相同的效果。 - Mohammad Khan Awan

Answer 2

我的目标是在相机预览界面中创建圆形形状。 Flutter Camera 包中的 CameraPreview 提供了一系列图像（或视频）。 可以使用剪切（例如ClipRect，ClipRRect，ClipOval或ClipPath）来处理这些图像。

要创建一个“圆形形状”，可以使用如下代码所示的 ClipOval。

ClipOval(
  child: CameraPreview(controller)
)

- tim-montague