How to square crop a Flutter camera preview

Question

I'm trying to take square pictures in my app. I'm using the camera package and I'm trying to display a centre square-cropped version of the CameraPreview widget.

My goal is to show the central square of the preview (full width), with an even amount cropped from the top and bottom.

I was struggling to get this to work, so I created a minimal example using a fixed image. (Apologies for the dull picture of me in a chair):

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(),
      home: Scaffold(
        body: Example(),
      ),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        CroppedCameraPreview(),

        // Something to occupy the rest of the space
        Expanded(
          child: Container(),
        )
      ],
    );
  }
}

class CroppedCameraPreview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // We will pretend this is a camera preview (to make demo easier)
    var cameraImage = Image.network("https://i.imgur.com/gZfg4jm.jpg");
    var aspectRatio = 1280 / 720;

    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.width,
      child: ClipRect(
        child: new OverflowBox(
          alignment: Alignment.center,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: cameraImage,
          ),
        ),
      ),
    );
  }
}

This works fine - I get a full screen width image, centre cropped and pushed to the top of my app.

However, if I drop this code into my existing app and replace cameraImage with a CameraPreview, I get a lot of layout errors:

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performResize():
flutter: TextureBox object was given an infinite size during layout.
flutter: This probably means that it is a render object that tries to be as big as possible, but it was put
flutter: inside another render object that allows its children to pick their own size.
flutter: The nearest ancestor providing an unbounded width constraint is:
flutter:   RenderFittedBox#0bd54 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: FittedBox ← OverflowBox ← ClipRect ← ConstrainedBox ← Container ← Stack ← ConstrainedBox
flutter:   ← Container ← CameraWidget ← Column ← CameraPage ← MediaQuery ← ⋯
flutter:   parentData: offset=Offset(0.0, 0.0) (can use size)
flutter:   constraints: BoxConstraints(w=320.0, h=320.0)
flutter:   size: MISSING
flutter:   fit: fitWidth
flutter:   alignment: center
flutter:   textDirection: ltr
flutter: The nearest ancestor providing an unbounded height constraint is:
flutter:   RenderFittedBox#0bd54 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: FittedBox ← OverflowBox ← ClipRect ← ConstrainedBox ← Container ← Stack ← ConstrainedBox
flutter:   ← Container ← CameraWidget ← Column ← CameraPage ← MediaQuery ← ⋯
flutter:   parentData: offset=Offset(0.0, 0.0) (can use size)
flutter:   constraints: BoxConstraints(w=320.0, h=320.0)
flutter:   size: MISSING
flutter:   fit: fitWidth
flutter:   alignment: center
flutter:   textDirection: ltr
flutter: The constraints that applied to the TextureBox were:
flutter:   BoxConstraints(unconstrained)
flutter: The exact size it was given was:
flutter:   Size(Infinity, Infinity)
flutter: See https://flutter.io/layout/ for more information.

Can anyone suggest why I'm getting errors with the preview and how to avoid them?

Solution 1

I solved this by giving a specific size to my CameraPreview instance, by wrapping it in a Container:

  var size = MediaQuery.of(context).size.width;

  // ...

  Container(
    width: size,
    height: size,
    child: ClipRect(
      child: OverflowBox(
        alignment: Alignment.center,
        child: FittedBox(
          fit: BoxFit.fitWidth,
          child: Container(
            width: size,
            height:
                size / widget.cameraController.value.aspectRatio,
            child: camera, // this is my CameraPreview
          ),
        ),
      ),
    ),
  );

To respond to Luke's comment, I then used this code to square crop the resulting image. (Because even though the preview is square, the image captured is still standard ratio).

  Future<String> _resizePhoto(String filePath) async {
      ImageProperties properties =
          await FlutterNativeImage.getImageProperties(filePath);

      int width = properties.width;
      var offset = (properties.height - properties.width) / 2;

      File croppedFile = await FlutterNativeImage.cropImage(
          filePath, 0, offset.round(), width, width);

      return croppedFile.path;
  }

This uses https://github.com/btastic/flutter_native_image. It's been a while since I used this code - think it currently just works for portrait images, but should easily be extendable to handle landscape.

Solution 2

I have a code snippet similar to the one used in the answer.

Same as the answer, it supports cases when aspect ratio of the camera is different from aspect ratio of the screen.

Though my version has some difference: it does not require MediaQuery to get the device size, so it will fit the width of any parent (not just full-screen-width)

          ....

          return AspectRatio(
            aspectRatio: 1,
            child: ClipRect(
              child: Transform.scale(
                scale: 1 / _cameraController.value.aspectRatio,
                child: Center(
                  child: AspectRatio(
                    aspectRatio: _cameraController.value.aspectRatio,
                    child: CameraPreview(_cameraController),
                  ),
                ),
              ),
            ),
          );

To center-square-crop the image, see the snippet below.

It works equally fine with images in portrait and landscape orientation. It also allows to optionally mirror the image (it can be useful if you want to retain original mirrored look from selfie camera)

import 'dart:io';
import 'dart:math';
import 'package:flutter/rendering.dart';
import 'package:image/image.dart' as IMG;

class ImageProcessor {
  static Future cropSquare(String srcFilePath, String destFilePath, bool flip) async {
    var bytes = await File(srcFilePath).readAsBytes();
    IMG.Image src = IMG.decodeImage(bytes);

    var cropSize = min(src.width, src.height);
    int offsetX = (src.width - min(src.width, src.height)) ~/ 2;
    int offsetY = (src.height - min(src.width, src.height)) ~/ 2;

    IMG.Image destImage =
      IMG.copyCrop(src, offsetX, offsetY, cropSize, cropSize);

    if (flip) {
        destImage = IMG.flipVertical(destImage);
    }

    var jpg = IMG.encodeJpg(destImage);
    await File(destFilePath).writeAsBytes(jpg);
  }
}

This code requires image package. Add it into pubspec.yaml:

  dependencies:
      image: ^2.1.4

Solution 3

After some testing here is what I suggest for cropping the CameraPreview (not the image itself) to any rectangular shape:

 Widget buildCameraPreview(CameraController cameraController) {
    final double previewAspectRatio = 0.7;
    return AspectRatio(
      aspectRatio: 1 / previewAspectRatio,
      child: ClipRect(
        child: Transform.scale(
          scale: cameraController.value.aspectRatio / previewAspectRatio,
          child: Center(
            child: CameraPreview(cameraController),
          ),
        ),
      ),
    );
  }

The advantage are similar to @VeganHunter's solution but can be extended to any rectangular shape by playing with the previewAspectRatio. A value of 1 for previewAspectRatio will result in a square shape, a value of 0.5 will be a rectangle half the height of its width, and a value of cameraController.value.aspectRatio will be the full size preview.

Also, here is the explanation why this work at all:

One thing with Flutter is that making a child overflow its parent is usually impossible (because of the way the widgets size is computed during the layout phase). The use of Transform.scale is crucial here, because according to the doc:

This object applies its transformation just prior to painting, which means the transformation is not taken into account when calculating how much space this widget's child (and thus this widget) consumes.

This means the widget will be able to overflow it's container when scaled up, and we can clip (and thus hide) the overflowing parts with CLipRect, limiting the overall size of the preview to its parent size. It would not be possible to achieve the same effect using only Containers, as they would scale themselves based on the available space during the layout phase, and there would be no overflow so nothing to clip.

The scale (cameraController.value.aspectRatio * previewAspectRatio) is chosen to have the width of the preview match the width of its parent.

If this solution does not work for you try to replace all the cameraController.value.aspectRatio by its inverse (1 / cameraController.value.aspectRatio).

This was tested for portraitUp mode only and some tweaking may be needed for Landscape.