Camera preview stretched in flutter

Question

I have set the camera preview be full-screen to meet a particular UI, however the camera is full-screen, but it is very stretched.

Where am I going wrong?

final size = MediaQuery.of(context).size;
    final deviceRatio = size.width / size.height;
    return Stack(children: <Widget>[
      Center(
        child: Transform.scale(
          scale: controller.value.aspectRatio / deviceRatio,
          child: new AspectRatio(
            aspectRatio: controller.value.aspectRatio,
            child: new CameraPreview(controller),
          ),
        ),
      ),
    ]);
  }

I have attached a photo below. AS you can see, it is very blurred, and stretched, when compared against the button.

EDIT: Here is the error I am receiving:

NoSuchMethodError: The Method '[]' was called on Null.
Receiver: null
Tried calling: [](0)

EDIT - Here is the full camera page,

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'dart:async';

import 'MyApp/main.dart';

List<CameraDescription> cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();
  runApp(MyApp());
}

class Camera extends StatefulWidget {
  Function setData;
  Camera({Key key, this.setData}) : super(key: key);

  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<Camera> {
  CameraController controller;
  List cameras;
  int selectedCameraIndex;
  String imgPath;
  var image;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

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

Kirill Bubochkin · Accepted Answer · 2021-03-28T17:45:10.417

4

Your screen resolution doesn't necessarily match you camera resolution, you should use camera's resolution and aspect ratio to get proper image.

Take a look at the aspectRatio property that you can get from CameraValue after initialization.

UPDATE:

Actually, you don't even need aspectRatio. You can just use the DevicePreview directly. If the parent widget is fullscreen, the preview will be fullscreen as well. E.g. the official example in camera package is rendered like that:

Example code:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

List<CameraDescription> cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();
  runApp(CameraApp());
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  CameraController controller;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

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

edited Mar 28 '21 at 17:45

answered Mar 27 '21 at 22:13

Kirill Bubochkin

5,868
2
31
50

But you shouldn't scale it to match your screen size, as they can be completely different. You can just leave CameraPreview widget. Take a look at the example in [camera](https://pub.dev/packages/camera) package readme: it's already fullscreen. – Kirill Bubochkin Mar 28 '21 at 17:39
I marketed as correct, as this should be working, however, I made an edit of what is happening. If you could review, that would be awesome. – KirtM9 Mar 28 '21 at 20:12
Remove `List cameras;` from `_CameraScreenState` as it shadows `List cameras;` defined at the top of the file. – Kirill Bubochkin Mar 28 '21 at 21:01
So you need to present it in fullscreen and you cannot change the size of the preview view with `Container` for instance? – lolelo Aug 27 '21 at 12:12
I found a way to size the camera with this approach: https://stackoverflow.com/questions/51348166/how-to-square-crop-a-flutter-camera-preview – lolelo Aug 30 '21 at 09:16
@KirillBubochkin The camera is matching the screen with this sample but the preview is still stretched since the camera aspect ratio is lower than the screen ratio. Without scale up the camera preview to fit the screen ratio I don't know how it can match. What is recommended ? – nicover Nov 17 '21 at 14:32

Camera preview stretched in flutter

1 Answers1

Linked