How to set Camera Preview to full screen in Flutter?

Question

I am using the camera 0.9.4+5 package. I think the Camera Preview's size and aspect ratio of the package has been changed. Please let me know how to set the Camera Preview to full screen without stretch. Thank you.

Answer 1

For now the only solution in my mind is to make the package local and removed it from yaml file and then make the aspect ratio according to your will :)

Answer 2

Place your CameraPreview inside of an AspectRatio inside of a SizedBox with you screen dimensions.

Code below:

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import '../../main.dart';
// I defined cameras in main

class FullScreenCamera extends StatefulWidget {
  const FullScreenCamera({Key? key}) : super(key: key);

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

class _FullScreenCameraState extends State<FullScreenCamera>
    with WidgetsBindingObserver {
  late CameraController controller;
  late Future<void> _initializeControllerFuture;

  double? _screenWidth;
  double? _screenHeight;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.ultraHigh);
    controller.setFlashMode(FlashMode.auto);
    _initializeControllerFuture = controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    _screenWidth = MediaQuery.of(context).size.width;
    _screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Stack(
              children: [
                SizedBox(
                  width: _screenWidth,
                  height: _screenHeight,
                  child: AspectRatio(
                    aspectRatio: controller.value.aspectRatio,
                    child: CameraPreview(controller),
                  ),
                ),
              ],
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

Edit: I didn't realize, but the code is creating stretching as seen below on an iphone 13 pro with a 19.5:9 aspect ratio... As Christopher Perry pointed out, the camera view aspect ratio appears stuck at 16:9 and just fills out the screen resulting in stretching.

Stretched in full screen:

Normal: