The camera displays a stretched image

209

Solution 1

You can use FractionallySizedBox which will scale to your container

FractionallySizedBox(
  heightFactor: 1.0,
  widthFactor: 1.0,
  child: ...
)

Solution 2

You can scale using Matrix4.diagonal3Values for scaling, since you can control the X, Y, Z axis. X is the horizontal, Y is the vertical and Z is for those going into other dimensions


final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
final xScale = cameraController.value.aspectRatio / deviceRatio;
// Modify the yScale if you are in Landscape
final yScale = 1;


return Container(
  child: AspectRatio(
        aspectRatio: deviceRatio,
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.diagonal3Values(xScale, yScale, 1),
          child: CameraPreview(cameraController),
        ),
    ),
);

Check this out Making a camera application in Flutter

Share:
209
Captivity
Author by

Captivity

Updated on January 05, 2023

Comments

  • Captivity
    Captivity 10 months

    I have that code:

    final size = MediaQuery.of(context).size;
        final deviceRatio = size.width / size.height;
        return Align(
          alignment: Alignment.topCenter,
          child: AspectRatio(
            aspectRatio: deviceRatio,
            child: Stack(
              children: <Widget>[
                CustomPaint(
                  foregroundPainter: MeasureFaceOutline(isPosCorrect: true),
                  child: Transform(
                    alignment: Alignment.center,
                    transform: Platform.isIOS ? Matrix4.rotationX(math.pi) : Matrix4.identity(),
                    child: Texture(textureId: textureId),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    

    And my view from camera is very stretched. How can I set ratio (or transform) for display camera view without stretched?

    EDIT: If I use CameraPreview like that:

    Transform.scale(
                    scale: 1.7,
                    child: Center(
                      child: CameraPreview(controller!),
                    ),
                  )
    

    everything is okay, but I have to use Texture instead CameraPreview

    • Rahul
      Rahul over 1 year
      I believe the problem is the underlaying texture is returning the fixed size which you are somehow stretching. You can try using BoxFit or have the calculation on native side to see how much size the texture should have there.
    • Captivity
      Captivity over 1 year
      Still I don't know how can I calculate that size.