Flutter camera appears stretched

问题

I've been playing around with flutter an i'm loving it so far, but I'm having an issue getting the camera working.

I follow the directions on this page https://pub.dartlang.org/packages/camera and it works. However, the camera is stretched so that it fits the phone screen, but the image is warped and taller than it should be. Other apps which use the camera seem to keep it in proportion, is there a way to ensure that it doesn't get stretched but still fills the screen?

回答1:

Building upon the solution by lase, this works even when the aspect ratio of the device is different then the camera ratio:

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
return Transform.scale(
  scale: controller.value.aspectRatio / deviceRatio,
  child: Center(
    child: AspectRatio(
      aspectRatio: controller.value.aspectRatio,
      child: CameraPreview(controller),
    ),
  ),
);

回答2:

I just want to build upon Marek Lisy's answer due to the fact that it does break the container. In my case I am using a TabBarView but that answer causes incorrect snapping to tabs. I fixed this using a ClipRect as seen below:

final size = MediaQuery.of(context).size;

if (!controller.value.isInitialized) {
  return Container();
}
return ClipRect(
  child: Container(
    child: Transform.scale(
      scale: controller.value.aspectRatio / size.aspectRatio,
      child: Center(
        child: AspectRatio(
          aspectRatio: controller.value.aspectRatio,
          child: CameraPreview(controller),
        ),
      ),
    ),
  ),
);

Best of luck guys! I spent an hour or so trying to figure this out. So hopefully nobody has the same problem.

回答3:

I had a similar problem, and while Richard's answer was helpful, I also had the problem of the preview being too small. There might be better ways, but I was able to solve it by scaling this by an inversion of the aspect ratio like so:

return new Scaffold(
  appBar: new AppBar(title: new Text('Capture')),
  body: new Transform.scale(
      scale: 1 / controller.value.aspectRatio,
      child: new Center(
        child: new AspectRatio(
            aspectRatio: controller.value.aspectRatio,
            child: new CameraPreview(controller)),
      )),
);

From the inside out, this should:

Build the CameraPreview at the correct aspect ratio
Center this preview in the view
Apply a scaling transform, which allows the preview to fill the screen appropriately, based on aspect ratio

回答4:

You need to wrap the preview in a Widget that gives the correct aspect ratio - either by setting the width and height to the correct ratio yourself, or using AspectRatio. For example, the camera plugin example uses:

new Expanded(
  child: new Padding(
    padding: const EdgeInsets.all(5.0),
    child: new Center(
      child: new AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: new CameraPreview(controller),
      ),
    ),
  ),
),

回答5:

I just want to add that, If after positioning the camera preview at the center and it isn't fullscreen, changing the resolution of the camera to veryHigh will definitely make it fullscreen.

CameraController( cameras[0], ResolutionPreset.veryHigh )

来源：https://stackoverflow.com/questions/49946153/flutter-camera-appears-stretched

标签

camera

dart

android-camera

Flutter