2

In Flutter, whilst taking a video, how can we overlay a filter screen, allowing users to capture only their face. This is now commonplace in many banking apps, where an oval circle is shown (as below) and rest all is blurred. This helps guide the user to put their face in that circle boundary only.

enter image description here

How can we do something like above in flutter?

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
sppc42
  • 2,994
  • 2
  • 31
  • 49

1 Answers1

2

You can check out my tutorial on recording a video: https://bettercoding.dev/flutter/tutorial-video-recording-and-replay/.

There, I overlay the CameraPreview with a button. You could also overlay it with a transparent widget, darkening everything but the area around the face.

This could probably be done as shown in this post: Flutter: inverted ClipOval using a CustomClipper.

return Center(
  child: Stack(
    alignment: Alignment.bottomCenter,
    children: [
      CameraPreview(_cameraController),
      FaceOverlay(), // some gray overlay with a clipped out area
    ],
  ),
);
Stefan Galler
  • 781
  • 4
  • 12
  • am able to overlay the filter, but taking a picture, am getting the full image. How can I get the final image also with the filter, so that I just capture what I clicked. – sppc42 Dec 31 '21 at 16:18
  • You can wrap your widgets in a `RepaintBoundary` and export the pixels as an image as shown here: https://stackoverflow.com/questions/51117958/how-to-take-a-screenshot-of-the-current-widget-flutter – Stefan Galler Jan 02 '22 at 10:29