flutter - 在 Flutter Stable 通道上使用 Camera 0.8.0 时,Flutter CameraPreview 小部件显示黑色而不是相机视图
问题描述
使用相机 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,
),
),
Positioned(
bottom: 0,
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,
bubble: false,
),
),
],
),
);
}
}
我的颤振医生是:-
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 并尝试修剪角落时,它显示黑色屏幕和红色矩形
我通过使用custome paine在相机预览顶部创建一个图层来解决它,以消除屏幕矩形形状和带有圆角的内部形状之间的差异,以掩盖下面的相机预览
谷歌地图预览也会出现此错误
推荐阅读
- python - 在 Python 中读取 YAML 文件,这是最好的方法吗?
- xslt - 如何从 xpath 列表创建合并的 xml 节点(或如何合并单个不一致的节点)
- laravel - 在 Homestead 中执行 NPM INSTALL 时出错
- python - 部署 Django 应用程序以呈现为静态站点
- python - 如何将行添加到将元组保持为元组而不是拆分为两个元素的数据框中?
- python - 测试失败,因为烧瓶正在返回 json 插入的流
- sql - 与第 1 列分组时,删除第 2 列中具有不同值的行
- python - 如何在不覆盖的情况下增加多个文件的文件名中的数字?
- git - GIT 保留分支特定文件 - 始终忽略特定文件
- installation - 在 Ubuntu 20.04.1 LTS 上安装 VirtualBox 的问题