title: How to square crop a Flutter camera preview
body: <p>I'm trying to take square pictures in my app. I'm using the <a href="https://pub.dartlang.org/packages/camera" rel="noreferrer">camera</a> package and I'm trying to display a centre square-cropped version of the <code>CameraPreview</code> widget.</p>
  
  <p>My goal is to show the central square of the preview (full width), with an even amount cropped from the top and bottom.</p>
  
  <p>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):</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
  void main() =&gt; 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: &lt;Widget&gt;[
          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,
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>This works fine - I get a full screen width image, centre cropped and pushed to the top of my app.</p>
  
  <p>However, if I drop this code into my existing app and replace <code>cameraImage</code> with a <code>CameraPreview</code>, I get a lot of layout errors:</p>
  
  <pre class="lang-none prettyprint-override"><code>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.
  </code></pre>
  
  <p>Can anyone suggest why I'm getting errors with the preview and how to avoid them?</p>