I am trying to put a full camera in a container that is 255 in height and full in width.

I've tried a lot of tweaking the code below, but I'm not sure how to apply the ratio.

in widget size Is there no room to fix it with the correct camera aspect ratio?

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),
    );
  }
}

CodePudding user response：

The CameraPreview class cannot be modified according to your height and width. If you try to put the CameraPreview inside a sizedbox OR AspectRatio class, then it will give you a skewed image. The best option to get a preview without skewing the output is to use a stack. Sample code is below:

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

List<CameraDescription> cameras = List.empty(growable: true);
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'My Flutter Camera',
      home: CameraApp(),
    );
  }
}

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

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

class _CameraAppState extends State<CameraApp> {
  CameraController controller =
      CameraController(cameras[1], ResolutionPreset.max);

  @override
  void initState() {
    super.initState();
    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 Stack(
      children: [
        CameraPreview(controller),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              color: Colors.white,
              height: (MediaQuery.of(this.context).size.height - 255) / 2,
            ),
            const SizedBox(
              height: 255,
            ),
            Container(
              color: Colors.white,
              height: (MediaQuery.of(this.context).size.height - 255) / 2,
            ),
          ],
        )
      ],
    );
  }
}