Appearance

On this page

Creating a User Preview ​

As part of your application, it is recommended to present the user with a camera preview, as it helps the user to center his/her face on the camera screen. It also allows for the presentation of a face detection bounding graphic on the screen.

The following code can be used to create a preview and present a face detection bounding graphic to the user.

1. Add a CameraPreviewView widget to the screen ​

CameraPreviewView widget is supplied by the Binah.ai Flutter SDK. It is a wrapper widget of a native (iOS/Android) view.

Note

Due to performance considerations, the camera preview is implemented as a native view that presents the images received from the SDK and is wrapped by a Flutter widget.

The aspect ratio of the images received from the SDK is 4:3. In order to preserve the same aspect ratio in the UI and prevent image distortion, the CameraPreviewView widget is wrapped with Flutter's AspectRatio widget, set to aspectRatio: 0.75.

Dart
class _CameraPreview extends StatefulWidget {
  const _CameraPreview({ Key? key }) : super(key: key);

  @override
  _CameraPreviewState createState() => _CameraPreviewState();
}

class _CameraPreviewState extends State<_CameraPreview> {

  Size? size;

  @override
  Widget build(BuildContext context) {

    return WidgetSize(
      onChange: (size) => setState(() { this.size = size; }),
      child: AspectRatio(
        aspectRatio: 0.75,
        child: Stack(
          children: [
            Stack(     
              children: <Widget>[
                const CameraPreviewView(),
                _FaceDetectionView(size: size),
              ],
            ),
          ]
        )
      )
    );
  }
}

2. Drawing the Face Detection Graphics ​

Face detection graphics are implemented in Flutter on the CameraPreviewView widget. This allows the application to control the look and feel of the face detection bounding graphic in accordance with the application's UI requirements. The position of the face detection bounding graphic in the image is provided by the SDK.

Dart
class _FaceDetectionView extends StatelessWidget {

  final Size? size;
  const _FaceDetectionView({ Key? key, required this.size}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var imageInfo  = context.select<MeasurementModel, sdk_image_data.ImageData?>((model) => model.imageData);
    if (imageInfo == null) {
      return Container();
    }

    var roi = imageInfo.roi;
    if (roi == null) {
      return Container();
    }
    
    var devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
    var widthFactor = size!.width / (imageInfo.imageWidth / devicePixelRatio);
    var heightFactor = size!.height / (imageInfo.imageHeight / devicePixelRatio);
    return Positioned(
      left: (roi.left * widthFactor) / devicePixelRatio,
      top: (roi.top * heightFactor) / devicePixelRatio,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
          border: Border.all(width: 4, color: const Color(0xff0653F4)),
          borderRadius: BorderRadius.circular(5),
        ),
        width: (roi.width * widthFactor) / devicePixelRatio,
        height: (roi.height * heightFactor) / devicePixelRatio
      )
    );
  }
}