[英]Camera preview stretched in flutter
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.看一下初始化后可以从CameraValue
获取的aspectRatio属性。
UPDATE:更新:
Actually, you don't even need aspectRatio
.实际上,您甚至不需要aspectRatio
。 You can just use the DevicePreview
directly.您可以直接使用DevicePreview
。 If the parent widget is fullscreen, the preview will be fullscreen as well.如果父小部件是全屏的,则预览也将是全屏的。 Eg the official example in camera package is rendered like that:例如,相机package 中的官方示例是这样呈现的:
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),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.