A complete Camera UI within your Flutter app finally easy

Sébastien Bel
Apparence.io
Published in
3 min readJan 9, 2023

2 years ago, we had to create a complete photo UI for a timelapse app.
At this time the flutter plugin was not that stable. That’s why we started camerawesome.

Today the official plugin is stable but… You still have to create the complete UI (handling flash, video or picture mode, preview ratio…). It can take months when 99% of apps will need the same features.
You will also have to deal with a CameraController even for the most common use cases.

That’s where CamerAwesome shines.
- Using just a few lines of code you will be able to have a complete camera UI within your flutter app.
- You want to create your own UI? That’s ok, you can use and customize all our built-in widgets or do yours.

All of these come from the 1.0.0 release, which didn’t come without its challenges.
Maintaining a Flutter plugin involves being able to work on each platform. iOS being very different from Android, we had difficulties to have each platform on par.
This difference appeared mainly because of three issues:
- Each platform has its own language and features (unavoidable).
- You need an iOS device to test the camera plugin since the camera is not available on the simulator.
- Camera2 api on Android is complex and some basic features won’t work the same way on different devices.

The necessity for an iOS device could not be entirely ditched, but with the use of patrol, we’ve made end-to-end tests that ensure us new commits don’t break either platform.
The addition of end-to-end testing enabled us to approach changes with increased assurance.

On the Android part, CameraX was introduced several years ago to provide a simpler API based on Camera2. Indeed, introducing Camera2 was nice because of its new features, but there were a lot of developers who had difficulties using it because of its complexity.
CameraX also comes with an handy goal: it should handle device specific configuration problems and let developers focus on the camera experience.
For above reasons, camerawesome migrated to this API as well.

What’s new

However, these behind the scene changes are not the only news about camerawesome 1.0.0.
Instead of having to write their UI over and over again, we’ve create a built-in UI that you can use directly within your app:

No need for a CameraController: everything is handled within the widget.
You can still configure flash, aspectRatio or zoom for instance.
For most simple usages, such as taking a picture without leaving your app, this should be enough.

This is what you can get with the above built-in UI:

If you need a more custom camera experience, we’ve also got you covered.
In this case, just use our custom() builder.

Through our builder, you can access the CameraState object and its various methods. These change depending on the camera mode (e.g. taking a picture or recording a video). For example, you can use the CameraState to determine the current flash mode and adjust it, or to start and stop video recording.
To learn more about customising your camera experience, check our doc.

CamerAwesome has even more to offer, such as image analysis to read barcodes or detect faces, and many more that you can retrieve on our doc.

Face detection using MLKit and CamerAwesome

There’s also more on the roadmap, stay tuned. ✌️

If you like this plugin, give it a ⭐️ to let us know!

We are Apparence.io, a 🇫🇷 flutter experts studio.
We are proud to release this 1.0.0 today after 2 years since the 1st commit.

--

--