相机预览混乱不堪 [英] Camera preview stretched in flutter

问题描述

我已将摄像头预览设置为全屏显示，以满足特定的UI，但是摄像头是全屏显示，但拉伸得很长.

我要去哪里错了?

 最终大小= MediaQuery.of(context).size;最终deviceRatio = size.width/size.height;return Stack(children:< Widget> [中心(子级:Transform.scale(比例尺:controller.value.aspectRatio/deviceRatio，子级:新的AspectRatio(AspectRatio:controller.value.aspectRatio，子级:新的CameraPreview(controller)，)，)，)，]);} 

我在下面附了一张照片.如您所见，与按钮进行比较时，它非常模糊且伸展.

这是我收到的错误:

  NoSuchMethodError:方法'[]'在Null上被调用.接收者:null尝试致电:[](0) 

编辑-这是完整的相机页面，

  import'package:flutter/cupertino.dart';导入'package:flutter/material.dart';导入'package:camera/camera.dart';导入'dart:async';导入'MyApp/main.dart';列表< CameraDescription>相机；Future< void>main()异步{WidgetsFlutterBinding.ensureInitialized();摄影机=等待可用摄影机();runApp(MyApp());}Camera类扩展StatefulWidget {函数setData;Camera({Key key，this.setData}):super(key:key);@override_CameraScreenState createState()=>_CameraScreenState();}类_CameraScreenState扩展了State< Camera>{CameraController控制器；列表相机；int selectedCameraIndex;字符串imgPath;var image;@override无效的initState(){super.initState();控制器= CameraController(cameras [0]，ResolutionPreset.max);controller.initialize().then((_){如果(！已安装){返回;}setState((){});});}@override无效dispose(){控制器?.dispose();super.dispose();}@override窗口小部件build(BuildContext context){如果(！controller.value.isInitialized){返回Container();}返回MaterialApp(主页:CameraPreview(控制器)，);}} 

解决方案

您的屏幕分辨率不一定与您的相机分辨率相匹配，您应该使用相机的分辨率和宽高比来获取合适的图像.

看看您的

示例代码:

  import'dart:async';导入'package:flutter/material.dart';导入'package:camera/camera.dart';列表< CameraDescription>相机；Future< void>main()异步{WidgetsFlutterBinding.ensureInitialized();摄影机=等待可用摄影机();runApp(CameraApp());}CameraApp类扩展StatefulWidget {@override_CameraAppState createState()=>_CameraAppState();}类别_CameraAppState扩展了State< CameraApp>{CameraController控制器；@override无效的initState(){super.initState();控制器= CameraController(cameras [0]，ResolutionPreset.max);controller.initialize().then((_){如果(！已安装){返回;}setState((){});});}@override无效dispose(){控制器?.dispose();super.dispose();}@override窗口小部件build(BuildContext context){如果(！controller.value.isInitialized){返回Container();}返回MaterialApp(主页:CameraPreview(控制器)，);}} 

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

解决方案

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

这篇关于相机预览混乱不堪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！