The camera displays a stretched image

Viewed 195

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

2 Answers

You can use FractionallySizedBox which will scale to your container

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

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

Related