How to set Flutter CameraPreview Size "Fullscreen"

Question

Iam using CameraPreview for measuring height of an object,But the issue was i cant able to set cameraPreview height full screen..

I have tried Positioned widget, it fills the screen but the image was stretched. I have tried Transform Widget, but height does not fills fullscreen, white space is coming.Image is not stretched.

Mycode:

final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;

return Stack(
            children: <Widget>[
              Transform.scale(
                scale: controller.value.aspectRatio/deviceRatio,
                child: new AspectRatio(
                  aspectRatio: controller.value.aspectRatio,
                  child: new CameraPreview(controller),
                ),
              ),);

Kindly help me to fit CameraPreview "FULLSCREEN" without image streching..

Check this out. it might be of help: https://stackoverflow.com/a/59456849/4329236 — Iredia Ebikade, Dec 23 '19 at 14:25

wangpan · Answer 1 · 2021-05-18T03:45:12.360

CameraValue.aspectRatio returns width / height rather than height / width since 0.7.0, and CameraPreview handles AspectRatio itself now, so imo the working code snippet would be as follows:

/// only work inside WidgetsApp or MaterialApp, which introduces a MediaQuery
final scale = 1 / (controller.value.aspectRatio * MediaQuery.of(context).size.aspectRatio);
return Transform.scale(
  scale: scale,
  alignment: Alignment.topCenter,
  child: CameraPreview(controller),
);

update:

After scale by Transform the preview may paint off screen-size limit when used in a TransitionRoute. (When hosted in a CupertinoPageRoute a drag gesture will clearly show this).

So I think it would be a good idea to clip the preview to make it exactly matching the screen size.

final mediaSize = MediaQuery.of(context).size;
final scale = 1 / (controller.value.aspectRatio * mediaSize.aspectRatio);
return ClipRect(
  clipper: _MediaSizeClipper(mediaSize),
  child: Transform.scale(
    scale: scale,
    alignment: Alignment.topCenter,
    child: CameraPreview(controller),
  ),
);
class _MediaSizeClipper extends CustomClipper<Rect> {
  final Size mediaSize;
  const _MediaSizeClipper(this.mediaSize);
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, mediaSize.width, mediaSize.height);
  }
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}

This should be the accepted answer. Actually it makes sense to clip the preview size from the camera to the devices screen size. Non of all the methods I have seen actually followed the idea of clipping to the screen size. non actually worked for me but this. Thanks man. — Emmanuel Edwards, Jan 29 '22 at 21:53

score 6 · Accepted Answer · answered Jun 26 '19 at 05:47

6

Issue has been solved by wrapping Centre widget in Transform widget

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),
                       ),
                   ),),);

answered Jun 26 '19 at 05:47

Navin Kumar

3,393
3
21
46

1

hi, can you please edit your answer so it looks the same as you wrote in this article in section "Display CameraPreview": https://medium.com/@navinkumar0118/take-a-picture-using-flutter-camera-a9c11d282632 – rexxar Apr 14 '20 at 07:57
3

Tested According to Article and above Code Snippet, Image get stretched and major image portion is not showing at all. – Skandar Munir Aug 15 '21 at 03:37

Luciano van der Veekens · Answer 3 · 2022-05-29T12:47:21.580

Try wrapping the CameraPreview in a FittedBox with BoxFit.cover and make sure the parent container equals the space you want to fill.

@override
Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;

  return Scaffold(
      body: cameraController == null
          ? const Text("Loading Camera...")
          : Container(
              width: size.width,
              height: size.height,
              child: FittedBox(
                fit: BoxFit.cover,
                child: Container(
                    width: 100, // the actual width is not important here
                    child: CameraPreview(cameraController!)),
              )));
}

1

This answer actually works. – Abhay Jul 25 '23 at 11:35

score 4 · Answer 4 · answered Sep 26 '22 at 08:36

4

You can fix this by wrapping the CameraPreview inside a LayoutBuilder and a SizedBox based on the constraints of the LayoutBuilder like:

      LayoutBuilder(
        builder: (context, constraints) {
          return SizedBox(
            width: constraints.maxWidth,
            height: constraints.maxHeight,
            child: CameraPreview(controller),
          );
        },
      ),

it will work like a charm

answered Sep 26 '22 at 08:36

Mohammad Sobhy

98
2
3

4

Doesn't work, image gets stretched – nibbo Mar 12 '23 at 15:30

score 3 · Answer 5 · answered Jun 16 '22 at 15:30

just use:

 var isPortrait =
            MediaQuery.of(context).orientation == Orientation.portrait;
        Size mediaSize = MediaQuery.of(context).size;
        return SizedBox(
          width: mediaSize.width,
          height: mediaSize.height,
          child: FittedBox(
            fit: BoxFit.cover,
            child: SizedBox(
                width: isPortrait
                    ? _controller!.value.previewSize!.height
                    : _controller!.value.previewSize!.width,
                height: isPortrait
                    ? _controller!.value.previewSize!.width
                    : _controller!.value.previewSize!.height,
                child: CameraPreview(_controller!)),
          ),
        );

score 1 · Answer 6 · answered Mar 30 '22 at 14:02

Unfortunately both Wangpan and Navin Kumar's answers did not work for me. But the following solution did work for me.

I have two state widget fields: The cameraControllerKey, used to make a reference to the Container holding the CameraPreview. The cameraPreviewScale used to store the size of the original cameraPreview.

In my build method I first let the CameraView build its UI and set the scale to 1, meaning that I just let it draw itself as it comes (so not full screen... Yet). Also note that i set the key to my GlobalKey cameraControllerKey. In the addPostFrameCallback method I calculate the scale based on the Container view size that holds the CameraPreview and the actual screenSize. I hope it helps for you, happy fluttering.

///field in widget state
var cameraControllerKey = GlobalKey();
double? cameraPreviewScale;


/// In build method
if(cameraPreviewScale==null){
  WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
    final screenSize = MediaQuery.of(context).size;
    final previewSize = cameraControllerKey.currentContext!.size!;
    setState(() {
      cameraPreviewScale = screenSize.width / previewSize.width;    
    });
  });
}

return Scaffold(
key: _scaffoldKey,
body: 
  Stack(
    fit: StackFit.loose,
    children: [
      Center(
        child: Container(
            key: cameraControllerKey,
            child: Transform.scale(
                alignment: Alignment.center,
                scale: cameraPreviewScale ?? 1,
                child: CameraPreview(cameraController!))),
      ),
    ],
  )
);

check to see if this works on devices without 16:9 aspect ratio, because it doesn't fill the screen on my iphone 13 pro with a 19.5:9 aspect ratio. — greenzebra, Apr 14 '22 at 19:16

score 0 · Answer 7 · answered Sep 09 '21 at 12:08

0

final mediaSize = MediaQuery.of(context).size;
return Transform.scale(
scale: 1 /
(cameraController.value.aspectRatio  * mediaSize.aspectRatio),
alignment: Alignment.center,
child: CameraPreview(cameraController),);

answered Sep 09 '21 at 12:08

mohamed nasser

41
3

7

Welcome to Stack Overflow. Code dumps without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please [edit] your question and explain how it answers the specific question being asked. See [answer]. – ChrisGPT was on strike Sep 09 '21 at 18:20

score -1 · Answer 8 · answered May 07 '21 at 08:45

-1

I following the demo from the https://flutter.dev/docs/cookbook/plugins/picture-using-camera

and I do not customize the AspectRatio of the CameraPreview (actually I did but it not working).

The way I solve it is very simple.

return Stack(
  children: [
    Container(
        width: double.infinity,
        height: double.infinity,
        child: CameraPreview(_cameraController))
  ],
);

I am using the attributes width and height of Container widget to make the CameraPreview stretch as fullsceen.

answered May 07 '21 at 08:45

Cuong Vo

648
9
12

1

This may cause the preview to stretch. – Benjamin May 29 '21 at 13:43
And double.infinity isn't used anywhere in that demo – Code on the Rocks Jul 28 '21 at 13:11
1

@JoeMuller I followed the demo to implement the Camera widget AND customized width and height of Container widget which contains the CameraPreview widget. Please read carefully. – Cuong Vo Jul 28 '21 at 22:56
@Benjamin Because the question is how to stretch the CameraPreview as full-screen. – Cuong Vo Jul 28 '21 at 22:58

score -2 · Answer 9 · answered Jan 12 '22 at 15:37

-2

This code works for Flutter version 2.8 and above

return Stack(
  children: [
    Positioned(
      top: 0,
      bottom: 0,
      child: CameraPreview(_cameraController!),
    ),
  ],
);

answered Jan 12 '22 at 15:37

Samir Ait abdelkoui

61
9

How to set Flutter CameraPreview Size "Fullscreen"

9 Answers9

Linked