如何解决在 Flutter Stable 频道上使用 Camera 0.8.0 时,Flutter CameraPreview 小部件显示黑色而不是相机视图
使用 Camera 0.8.0 插件 https://pub.dev/packages/camera
我有这段代码可以在图片中构建以下屏幕, 我在 Flutter Channel Stable 上
CameraPreview 在三星 Note 3 和 Iphone XR 上运行良好,但在模拟器上它显示了带有这个红色框的黑色预览,我不知道它是从哪里来的。
老实说,当我几个月前构建它时,它在模拟器上运行良好,但在将 Flutter 升级到 1.22.6 后,我将频道更改为稳定版
import 'package:bldrs/view_brains/drafters/scalers.dart';
import 'package:bldrs/view_brains/theme/iconz.dart';
import 'package:bldrs/views/widgets/buttons/dream_box.dart';
import 'package:bldrs/views/widgets/flyer/parts/flyer_zone.dart';
import 'package:bldrs/views/widgets/layouts/main_layout.dart';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
class CameraPage extends StatefulWidget {
final PageController controller;
CameraPage({Key key,this.controller}) : super(key: key);
@override
_CameraPageState createState() => _CameraPageState();
}
class _CameraPageState extends State<CameraPage> {
CameraController _controller;
Future<void> _controllerInitializer;
Future<CameraDescription> getCamera() async {
final c = await availableCameras();
return c.first;
}
@override
void initState(){
super.initState();
getCamera().then((camera){
setState(() {
_controller = CameraController(camera,ResolutionPreset.medium,enableAudio: false);
_controllerInitializer = _controller.initialize();
print('controller is building : $_controller');
});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final double _flyerSizeFactor = 1;
final double _flyerZoneWidth = superFlyerZoneWidth(context,_flyerSizeFactor);
return MainLayout(
pyramids: Iconz.DvBlankSVG,layoutWidget: FlyerZone(
flyerSizeFactor: _flyerSizeFactor,tappingFlyerZone: (){},stackWidgets: <Widget>[
FutureBuilder(
future: _controllerInitializer,builder: (context,snapshot){
if (snapshot.connectionState == ConnectionState.done)
{return CameraPreview(_controller); }
else
{return Center(child: CircularProgressIndicator());}
},),Positioned(
bottom: 0,child: DreamBox(
width: _flyerZoneWidth * 0.2,height: _flyerZoneWidth * 0.2,boxMargins: EdgeInsets.only(bottom: _flyerZoneWidth * 0.025),icon: Iconz.CameraButton,bubble: false,left: 0,child: DreamBox(
width: _flyerZoneWidth * 0.15,height: _flyerZoneWidth * 0.15,boxMargins: EdgeInsets.only(bottom: _flyerZoneWidth * 0.05,left: _flyerZoneWidth * 0.05),icon: Iconz.PhoneGallery,],);
}
}
我的 Flutter Doctor 是 :-
Doctor summary (to see all details,run flutter doctor -v):
[√] Flutter (Channel stable,1.22.6,on Microsoft Windows [Version 10.0.19042.804],locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[√] Connected device (2 available)
! Doctor found issues in 1 category.
关于上面的Android Studio问题,根据下面的回答,可以忽略 https://stackoverflow.com/a/64402448/13616137
解决方法
我发现了问题
当相机预览进入clipRRect并尝试修剪角落时,它显示带有红色矩形的黑屏
我通过在带有自定义油漆的相机预览顶部创建一个图层来解决此问题,以消除屏幕矩形形状和带有圆角的内部形状之间的差异,以掩盖下方的相机预览
谷歌地图预览也会出现这个错误
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。