Making a full screen camera application in Flutter
Writing a camera application in Flutter is a pretty simple task, however when developing an app in Flutter, that is heavily focused on using the camera, I think I am obliged to mention that the default camera plugin from Flutter. Is not really fully functional, we at Lightsnap had to create our own version of it by forking their plugin and make some modifications to support features like: flash, auto exposure and focus.
When we posted our app in r/flutterDev there was a request from a user there that we would share how we created the UI of our application, so we decided to write a little bit on how we achieved things, we’ll be writing it two parts. The first part will just cover the camera itself and the second part will be about the camera controls.
Unfortunately we won’t go into how we created the previous version. But we think the new one is much cooler and why not share the way we created that one instead 😄
Our user interface
In our previous version of Lightsnap we had a bottom drawer that included the camera control buttons, above them was the live camera preview itself and it filled the available remaining space of the device. However in our new version we wanted to include a full screen camera preview.
Here’s a screenshot of the previous version versus the current one.
A full screen camera
One may think, well this isn’t so hard to achieve. And what we needed was a full screen camera that did not appear stretched and making things in its view incongruous.
The already available solutions we found online, were not ticking these requirements. We tried out some code examples that were out there. And to test camera preview we placed a Coca-Cola bottle on the table and viewed it through our camera. Then we compared our camera with, Instagram and Snapchats camera preview. And they had a more perfectly sized bottle versus our camera that showed a very abnormal form.
Switching to the front facing camera was even worse, it felt like we had easily put on extra 20 kg’s and we both considered going vegetarian. Our faces looked extremely strange. We of course could not release our new version with a stretchy camera view, a better version had to be done.
This is the solution that we tried from the most upvoted StackOverflow answer:
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),
),
),
);That example was not working out as Transform.scale was transforming the scale on both the horizontal and vertical axis. And most if not all smartphone devices have a greater amount of height versus width, so it doesn’t make sense to scale both axes when your camera is locked in Portrait (like ours).
How do we fix this?
Our code uses Matrix4.diagonal3Values for scaling, as we can then control the X, Y, Z axis. X is the horizontal, Y is the vertical and Z is for the ones that want to go into other dimensions 🚀.
final size = MediaQuery.of(context).size;
final deviceRatio = size.width / size.height;
final xScale = cameraController.value.aspectRatio / deviceRatio;
// Modify the yScale if you are in Landscape
final yScale = 1;return Container(
child: AspectRatio(
aspectRatio: deviceRatio,
child: Transform(
alignment: Alignment.center,
transform: Matrix4.diagonal3Values(xScale, yScale, 1),
child: CameraPreview(cameraController),
),
),
);
If you are working with a camera that rotates and supports Landscape, you will most likely need to scale up the Y axis, and skip the X.
The Lightsnap app is locked in Portrait so we don’t need to re-scale the camera preview when the phone rotates. Just a note that you may need to do this if you are supporting landscape.
Camera control buttons
In the next article we will share more details on how we created the rest of the camera UI.
Stay tuned!
What is Lightsnap
Lightsnap is a disposable camera application, in the app you take 24 pictures and get them all printed and delivered home. We print the photos in the good old fashioned 4x6 format that fit perfectly into photo albums.
We have also written an article about 7 things we learned writing a camera app in Flutter, make sure to check that out as well. In that article are also sharing our version of the Camera plugin that we use in our application.
Check out our app if you are interested 👍
