How to Manage If Camera Appears Stretched In Flutter??

• General

When a user makes use of a camera using a plugin camera (A Flutter plugin for iOS and Android allowing access to the device cameras). So in this article, We will walk through how to Manage if Camera appears stretched in Flutter.

How to Manage if Camera appears stretched in Flutter??

This works even when the aspect ratio of the device is different than 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),
    ),
  ),
)

Aspect Ratio will have a code snippet like the below:

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 the aspect ratio

We can also fix it using a ClipRect Widget 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),
        ),
      ),
    ),
  ),
);

Users can also try the below code snippet.

if (!_cameraController.value.isInitialized) {
  return Container();
}

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
double xScale = _cameraController.value.aspectRatio / deviceRatio;
final yScale = 1.0;

if (MediaQuery.of(context).orientation == Orientation.landscape) {
  xScale = 1.0;
}

RotatedBox(
  quarterTurns: MediaQuery.of(context).orientation == Orientation.landscape ? 3 : 0,
  child: Container(
    child: AspectRatio(
      aspectRatio: deviceRatio,
      child: Transform(
        alignment: Alignment.center,
        transform: Matrix4.diagonal3Values(xScale, yScale, 1),
        child: CameraPreview(_cameraController),
      ),
    ),
  ),
),

In case of only in Portrait Mode:

Map<String, double> ratios = {
      '1:1': 1 / 1,
      '9:16': 9 / 16,
      '3:4': 3 / 4,
      '9:21': 9 / 21,
      'full': MediaQuery.of(context).size.aspectRatio,
    };

final size = MediaQuery.of(context).size;
         print('screen ratio: ${size.aspectRatio}, default: $_defaultRatio');

         return Transform.scale(
           scale: 1.0,
           child: AspectRatio(
             aspectRatio: _defaultRatio,
             child: OverflowBox(
               alignment: Alignment.center,
               child: FittedBox(
                 fit: size.aspectRatio >= _defaultRatio
                     ? BoxFit.fitHeight
                     : BoxFit.fitWidth,
                 child: Container(
                   width: size.aspectRatio >= _defaultRatio
                       ? size.height
                       : size.width,
                   height: size.aspectRatio >= _defaultRatio
                       ? size.height / controller.value.aspectRatio
                       : size.width / controller.value.aspectRatio,
                   child: Stack(
                     children: <Widget>[
                       CameraPreview(controller),
                     ],
                   ),
                 ),
               ),
             ),
           ),
         );

You can also try with RotatedBox() Widget like a below:

return RotatedBox(
        quarterTurns: MediaQuery.of(context).orientation == Orientation.landscape ? 3 : 0,
        child: AspectRatio(
          aspectRatio: controller.value.aspectRatio,
          child: CameraPreview(controller),
        ),

We have used ‘package:camera/camera.dart‘; The only thing you should think of is the “3 : 0” parameters. 3 — that is how many turns your box is made. Three – means system buttons are on the right side. And the second 0 — that is how to scale the preview over the windows. You may want to add flexibility in it and read actual positioning from the device and change these numbers.

We will get output like a below:

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through How to Manage if the Camera appears stretched in Flutter.

Still, Need a Support for Flutter Development? We would love to assist you !!!

Keep Learning !!! Keep Fluttering !!! Stay Connected !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.