'Switching Camera Aspect Ratio in Flutter

How do we switch the camera preview aspect ratio in Flutter?

I would like to switch be able to switch from 1:1, 4:3, and 16:9 aspect ratio

I am using this Camera plugin but it doesn't seem to have a functionality to do so.

Any thoughts please?



Solution 1:[1]

In theory, you should be able to update the CameraValue used by the CameraController, to override the previewSize with the desired values, which should update the preview dimensions.

It doesn't work.

With the following snippet, the Controller object is correctly updated with the correct values, but it doesn't affect the rendering.

  @override
  void initState() {
    super.initState();

    controller = CameraController(cameras[0], ResolutionPreset.max);
    final size = Size(300, 300);

    controller.initialize().then((_) {
      controller.value = controller.value.copyWith(previewSize: size);
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return MaterialApp(
      home: SizedBox(
        height: 300,
        width: 300,
        child: CameraPreview(controller),
      ),
    );
  }

I've even been trying to force the rendering layout in a SizedBox of 300x300, which has no effect whatsoever.

The reason behind this is probably that, behind the scenes, the camera plugin is calling this method to create the Preview :

  @override
  Widget buildPreview(int cameraId) {
    return Texture(textureId: cameraId);
  }

About the Texture Widget, here is what the documentation says :

The size of the rectangle is determined by its parent widget, and the texture is automatically scaled to fit.

Since it doesn't know who is his parent (we're not a in a widget tree, this is just a method returning a Texture widget), it's taking the whole available space, overriding any limits which could be set by the app implementing the Preview.

If my analysis is correct, that's either a bug, or it was implemented in order to "force" us to have a full-screen camera preview.
I still can't get why the AspectRatio widget doesn't have any impact on the rendering though.

Update :
I found out that there's an issue on the official Flutter's Github describing your problem here. This issue have been opened 4 years ago :(
https://github.com/flutter/flutter/issues/15953

A few people have been providing workarounds, the most recent which should fit your needs is probably this one.

Solution 2:[2]

The camera output video stream is at a resolution, such as 1280x720 or 640x480, and the aspect is 16:9 or 4:3. When you want to use an aspect ratio is 1:1, firstly you need to choose a resolution. If you choose 640x480, you need to clip the video to 480x480 by yourself. The number of resolutions hardware camera support is very limited, and the aspect is also.

If you only need the target aspect ratio to render on the screen, you can try the code like this:

    return Center(child: ClipRRect(
      child: SizedOverflowBox(
        size: const Size(300, 300), // aspect is 1:1
        alignment: Alignment.center,
        child: CameraPreview(controller),
      ),
    ));
  }

If you need to take video from the camera, you need to use a library such as FFmpeg to modify the video file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 wjploop