Search code examples
fluttercameraemulation

Flutter CameraPreview widget shows black color instead of camera view while using Camera 0.8.0 on Flutter Stable channel

Using Camera 0.8.0 Plugin https://pub.dev/packages/camera

I have this code that builds the below screen in the picture, I'm on Flutter Channel Stable

The CameraPreview works fine on Samsung Note 3 And on Iphone XR,, but on emulator it shows this Black preview with this red box which I have no Idea from where it came.

Honeslty, When I built it months ago it was working fine on the emulator, but I changed the channel to Stable after upgrading Flutter to 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,
            ),
          ),

        ],
      ),
    );
  }
}

enter image description here

And my Flutter Doctor is :-

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.

regarding the Android Studio issue above and according to below answer,, it can be ignored https://stackoverflow.com/a/64402448/13616137

Solution

  • I figured out the problem

    when the camera preview gets under clipRRect and try trimming the corners,, it shows that black screen with red rectangle

    i solved it by creating a layer on top of the camera preview with custome painet to cut the difference between screen rectangle shape and the inner shape with rounded corners to cover up the camera preview beneath

    this bug occurs as well with google map preview