I've been playing around with flutter an i'm loving it so far, but I'm having an issue getting the camera working.
I follow the directions on this page https://pub.dartlang.org/packages/camera and it works. However, the camera is stretched so that it fits the phone screen, but the image is warped and taller than it should be. Other apps which use the camera seem to keep it in proportion, is there a way to ensure that it doesn't get stretched but still fills the screen?
UPDATE: version v0.7.0 of the camera package introduced a breaking change for calculating camera aspectRatio and it seems they add the AspectRatio widget by default
Well, inspired by previous posts, I got it to work on 2 screens with different screen aspect ratios. What I did was print the values and look for differences (not quite what you'd call an educated approach). What came out of that was that one screen was taller than the other, although the same width so the screen aspect ratio is different.
Disclaimer: This was tested in an app locked to portrait orientation, no guaranty that this will work in landscape orientation. Also, it seems that this does put some of the camera preview pixels outside the screen, but at the moment I have no remedy for that.
No matter which camera resolution was selected, the camera controller aspect ratio stayed the same, but the screen aspect ratio differed so the calculations mentioned in older posts than this one worked for one (shorter) screen but not the other (taller).
After some long calculations it became apparent that, to fill the screen, the scale factor has to be greater than 1. So, in the end, to get the scale to work on both screens, there needs to be a check if one ratio is greater than the other and switch operands, to get a scale factor greater than 1, accordingly.
Here is what was changed and end result:
Widget cameraWidget(context) {
var camera = _cameraController.value;
// fetch screen size
final size = MediaQuery.of(context).size;
// calculate scale depending on screen and camera ratios
// this is actually size.aspectRatio / (1 / camera.aspectRatio)
// because camera preview size is received as landscape
// but we're calculating for portrait orientation
var scale = size.aspectRatio * camera.aspectRatio;
// to prevent scaling down, invert the value
if (scale < 1) scale = 1 / scale;
return Transform.scale(
scale: scale,
child: Center(
child: CameraPreview(_cameraController),
),
);
}
Widget cameraWidget(context) {
// get screen size
final size = MediaQuery.of(context).size;
// calculate scale for aspect ratio widget
var scale = _cameraController.value.aspectRatio / size.aspectRatio;
// check if adjustments are needed...
if (_cameraController.value.aspectRatio < size.aspectRatio) {
scale = 1 / scale;
}
return Transform.scale(
scale: scale,
child: Center(
child: AspectRatio(
aspectRatio: _cameraController.value.aspectRatio,
child: CameraPreview(_cameraController),
),
),
);
}
NOTE: results below are valid only for versions below 0.7.0 but the concept is the same
Notice that the scale has to be greater than 1 to fill the whole screen.
Screen size (w/h): Size(411.4, 797.7)
Screen size aspect ratio: 0.515759312320917
Controller preview size: Size(1280.0, 720.0)
Controller aspect ratio: 0.5625
Scale: 1.0906249999999997
Screen size (w/h): Size(411.4, 683.4)
Screen size aspect ratio: 0.6020066889632107
Controller preview size: Size(1280.0, 720.0)
Controller aspect ratio: 0.5625
Scale: 1.0702341137123745
Screen size (w/h): Size(411.4, 683.4)
Screen size aspect ratio: 0.6020066889632107
Controller preview size: Size(1280.0, 720.0)
Controller aspect ratio: 0.5625
Scale: 0.934375
Building upon the solution by lase, this works even when the aspect ratio of the device is different then the camera ratio:
final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
return Transform.scale(
scale: controller.value.aspectRatio / deviceRatio,
child: Center(
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: CameraPreview(controller),
),
),
);
I had a similar problem, and while Richard's answer was helpful, I also had the problem of the preview being too small. There might be better ways, but I was able to solve it by scaling this by an inversion of the aspect ratio like so:
return new Scaffold(
appBar: new AppBar(title: new Text('Capture')),
body: new Transform.scale(
scale: 1 / controller.value.aspectRatio,
child: new Center(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller)),
)),
);
From the inside out, this should:
CameraPreview at the correct aspect ratio
I just want to build upon Marek Lisy's answer due to the fact that it does break the container. In my case I am using a TabBarView but that answer causes incorrect snapping to tabs. I fixed this using a ClipRect as seen below:
final size = MediaQuery.of(context).size;
if (!controller.value.isInitialized) {
return Container();
}
return ClipRect(
child: Container(
child: Transform.scale(
scale: controller.value.aspectRatio / size.aspectRatio,
child: Center(
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: CameraPreview(controller),
),
),
),
),
);
Best of luck guys! I spent an hour or so trying to figure this out. So hopefully nobody has the same problem.
You need to wrap the preview in a Widget that gives the correct aspect ratio - either by setting the width and height to the correct ratio yourself, or using AspectRatio. For example, the camera plugin example uses:
new Expanded(
child: new Padding(
padding: const EdgeInsets.all(5.0),
child: new Center(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller),
),
),
),
),
Found this solution that worked for me: https://github.com/flutter/flutter/issues/15953#issuecomment-855182376
if (controller == null || !controller!.value.isInitialized) {
return const CardView(child: Text('No Camera to Preview'));
}
var tmp = MediaQuery.of(context).size;
final screenH = math.max(tmp.height, tmp.width);
final screenW = math.min(tmp.height, tmp.width);
tmp = controller!.value.previewSize!;
final previewH = math.max(tmp.height, tmp.width);
final previewW = math.min(tmp.height, tmp.width);
final screenRatio = screenH / screenW;
final previewRatio = previewH / previewW;
return ClipRRect(
child: OverflowBox(
maxHeight: screenRatio > previewRatio
? screenH
: screenW / previewW * previewH,
maxWidth: screenRatio > previewRatio
? screenH / previewH * previewW
: screenW,
child: CameraPreview(
controller!,
),
),
);
This worked for me so far for version 0.7.0+4
@override
Widget build(BuildContext context) {
return OrientationBuilder(
builder: (context, orientation) => AspectRatio(
aspectRatio: () {
final camera = controller.value;
if (orientation == Orientation.portrait) {
return 1 / camera.previewSize.aspectRatio;
// same as return camera.previewSize.flipped.aspectRatio;
}
return camera.previewSize.aspectRatio;
}(),
child: CameraPreview(controller),
),
);
}
This is what I came up with (only in Portrait mode):
Map<String, double> ratios = {
'1:1': 1 / 1,
'9:16': 9 / 16,
'3:4': 3 / 4,
'9:21': 9 / 21,
'full': MediaQuery.of(context).size.aspectRatio,
};
final size = MediaQuery.of(context).size;
print('screen ratio: ${size.aspectRatio}, default: $_defaultRatio');
return Transform.scale(
scale: 1.0,
child: AspectRatio(
aspectRatio: _defaultRatio,
child: OverflowBox(
alignment: Alignment.center,
child: FittedBox(
fit: size.aspectRatio >= _defaultRatio
? BoxFit.fitHeight
: BoxFit.fitWidth,
child: Container(
width: size.aspectRatio >= _defaultRatio
? size.height
: size.width,
height: size.aspectRatio >= _defaultRatio
? size.height / controller.value.aspectRatio
: size.width / controller.value.aspectRatio,
child: Stack(
children: <Widget>[
CameraPreview(controller),
],
),
),
),
),
),
);
In my case, I applied RotatedBox(). The following code worked perfectly:
return RotatedBox(
quarterTurns: MediaQuery.of(context).orientation == Orientation.landscape ? 3 : 0,
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: CameraPreview(controller),
),
I used 'package:camera/camera.dart';
The only thing you should think of is the "3 : 0" parameters. 3 — that is how many turns your box is made (clockwise). Three - means system buttons are on the right side. And the second 0 — that is how to scale the preview over the windows (now stretch). You may want to add flexibility in it and read actual positioning from the device and change these numbers.
I used additional car overlay to see how a car should be positioned in the front of the camera to post the photo to ad. board.
[
]
I were also facing the same issue in landscape orientation, which I resolved by below source code inside context -
if (!_cameraController.value.isInitialized) {
return Container();
}
final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
double xScale = _cameraController.value.aspectRatio / deviceRatio;
final yScale = 1.0;
if (MediaQuery.of(context).orientation == Orientation.landscape) {
xScale = 1.0;
}
and so the widget view were aligned like this, which I tested on OnePlus 6 (29 Q) & Asus Z010D (23 Marshmallow) Android OS versions, and it were working fine.
RotatedBox(
quarterTurns: MediaQuery.of(context).orientation == Orientation.landscape ? 3 : 0,
child: Container(
child: AspectRatio(
aspectRatio: deviceRatio,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.diagonal3Values(xScale, yScale, 1),
child: CameraPreview(_cameraController),
),
),
),
),
Hope this will give some help to someone.
After spending a very long time trying to find a way to handle this I moved over to this package https://pub.dev/packages/camerawesome and saved so much time.
You can do it like that StackFit.expand
Stack(
fit: StackFit.expand,
children: [_cameraPreviewWidget(), _cameraButtonWidget()],
)
I tried All Solutions but all of them has problem in some conditions, please try this, It works like a charm:
First:
final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
Then:
return Transform.scale(
scale: 1,
child: Center(
child: AspectRatio(
aspectRatio: deviceRatio,
child: CameraPreview(_cameraController),
),
),
);
Hope it helps ...
Edited: the below method works pretty well but using a FittedBox along with a SizedBox works much better. see this video from the flutter devs.
FittedBox(child: SizedBox(child: texture, width: imageWidthInPixels, height: imageHeightInPixels));
The best way to do this is to follow the instructions in the Widget of the week video on AspectRatio. Use AspectRatio to make sure the video maintains it's aspect ratio (go figure.) Then Wrap in an Align and then an Expanded. If you use a RotatedBox to adjust for orientation wrap the aspect ratio in it within the Align.
Expanded(
child:Align(
child:AspectRatio(
child:texture, aspectRatio:cameraAspectRatio)
The scaling has been reworked so you don't have to make any tricks using this other plugin: camera awesome
if you are not bothered about the resolution then change ResolutionPreset to ResolutionPreset.medium will fix your issue.
_controller = CameraController(
// Get a specific camera from the list of available cameras.
_cameraDescription,
// Define the resolution to use.
ResolutionPreset.medium,
);
I just want to add that, If after positioning the camera preview at the center and it isn't fullscreen, changing the resolution of the camera to veryHigh will definitely make it fullscreen.
CameraController(
cameras[0],
ResolutionPreset.veryHigh
)
