CODEWITHSUNDEEP
dartflutter
Nader Khaled
Nader Khaled

Reputation: 155

How to make a rounded Camera Preview in flutter

My Goal is to create Circle Shape with the Camera Preview. I tried setting a Container with Boxshape.circle and a Child : The CameraPreview(). But it didn't work. So i tried setting The CameraPreview() in a CircleAvatar(), but it didn't work too. Does anyone have a Solution?

Upvotes: 6

Views: 5207

Answers (2)

tim-montague
tim-montague

Reputation: 17372

My Goal is to create Circle Shape with the Camera Preview

CameraPreview (from the Flutter Camera package) provides a series of images (or video). And images can be shaped with clipping (such as ClipRect, ClipRRect, ClipOval, or ClipPath).

For a "Circle Shape" you can use ClipOval as seen in the code below:

ClipOval(
  child: CameraPreview(controller)
)

Upvotes: 3

K.chim
K.chim

Reputation: 928

Wrap the camera preview with a ClipRRect with its border-radius property defined to determine the curvature of the rounded corners:

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),

      ),
    )

Upvotes: 9

Related Questions