首页 > 解决方案 > 在 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

标签: fluttercameraemulation

解决方案


我解决了这个问题

当相机预览低于 clipRRect 并尝试修剪角落时,它显示黑色屏幕和红色矩形

我通过使用custome paine在相机预览顶部创建一个图层来解决它,以消除屏幕矩形形状和带有圆角的内部形状之间的差异,以掩盖下面的相机预览

谷歌地图预览也会出现此错误


推荐阅读