Camera preview ratio

I used the camera package to preview the camera and take a picture.
But the preview and the photo haven't the same ratio:

Any idea how to match these two so that the preview is in the same ratio?

This is the custom widget i made to preview the camera:

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:camera/camera.dart';

class CameraPhoto extends StatefulWidget {
  const CameraPhoto({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

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

class _CameraPhotoState extends State<CameraPhoto> {
  CameraController? controller;
  late Future<List<CameraDescription>> _cameras;

  @override
  void initState() {
    super.initState();
    _cameras = availableCameras();
  }

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

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<CameraDescription>>(
      future: _cameras,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasData && snapshot.data!.isNotEmpty) {
            if (controller == null) {
              controller =
                  CameraController(snapshot.data![0], ResolutionPreset.max);
              controller!.initialize().then((_) {
                if (!mounted) {
                  return;
                }
                setState(() {});
              });
            }
            return controller!.value.isInitialized
                ? MaterialApp(home: CameraPreview(controller!))
                : Container();
          } else {
            return Center(child: Text('Geen camera gevonden.'));
          }
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:camera/camera.dart';

Future<FFUploadedFile?> takePhoto() async {
  try {
    // Retrieve the list of available cameras
    List<CameraDescription> cameras = await availableCameras();

    // Initialize the camera controller
    CameraController controller =
        CameraController(cameras[0], ResolutionPreset.max);
    await controller.initialize();

    // Take a picture
    XFile image = await controller.takePicture();

    // Read the image bytes
    Uint8List bytes = await image.readAsBytes();

    // Create FFUploadedFile
    FFUploadedFile newFile = FFUploadedFile(bytes: bytes);

    // Dispose of the camera controller
    controller.dispose();
    return newFile;
  } catch (e) {
    print("Error capturing image: $e");
    return null;
  }
}

this is the code to take a picture:

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:camera/camera.dart';

Future<FFUploadedFile?> takePhoto() async {
  try {
    // Retrieve the list of available cameras
    List<CameraDescription> cameras = await availableCameras();

    // Initialize the camera controller
    CameraController controller =
        CameraController(cameras[0], ResolutionPreset.max);
    await controller.initialize();

    // Take a picture
    XFile image = await controller.takePicture();

    // Read the image bytes
    Uint8List bytes = await image.readAsBytes();

    // Create FFUploadedFile
    FFUploadedFile newFile = FFUploadedFile(bytes: bytes);

    // Dispose of the camera controller
    controller.dispose();
    return newFile;
  } catch (e) {
    print("Error capturing image: $e");
    return null;
  }
}
2 replies