UI Customization

[apalala-dev]

Description

CamerAwesome currently provides either a pre-built UI with no customization at all or a builder where the developer has to recreate the whole UI.

This PR intends to make customization of the base awesome UI easier by providing the ability to switch some of the widgets used by others.

Each widget should be more customizable as well:

• Its look and feel might be adapted to the one of the developer's app
• Its look might be changed completely to fit in the developer's app
• Its behaviour might change. It can be something as simple as adding method calls to save the new config in preferences or change the default behaviour such as the order of the switch between flash modes.

A new AwesomeTheme and an AwesomeThemeProvider are provided to reuse the same style across all of the CamerAwesome UI. It can be things as simple as colors, padding or sizes but also more complex things such as tap feedback using the ButtonBuilder. The later one lets the user decides if they want to use a ripple or a bouncing widget for instance.

By providing layout widgets and customizable buttons, most developers should be able to just reuse these components in CamerAwesomeBuilder.awesome() instead of falling back directly to the custom() builder and having to understand the whole camera workflow.

Default appearance should stay the same.

Progress

• [x] Customizable buttons
• [x] AwesomeTheme and AwesomeThemeProvider
• [x] Custom theme example
• [x] Custom Awesome UI
• [ ] Better naming
• [ ] Documentation on each widget
• [ ] Fix tests with new UI

Additional features

• [x] switchSensorConfig() can now provide additional features (aspectRatio, zoom, flash, sensorType) when switching sensors. It can be used to always use the same aspectRatio instead of falling back to the default aspectRatio when switching camera.
• [x] Customizable camera Preview position. Developers should be able to set its alignment and/or padding. Providing both a padding and an alignment could help to position the UI relative to it without being half on top of it for example.

Checklist

Before creating any Pull Request, confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]).

• [x] 📕 I read the Contributing page.
• [x] 🤝 I match the actual coding style.
• [x] ✅ I ran flutter analyze without any issues.

Breaking Change

• [ ] 🛠 My feature contain breaking change.

If your feature break something, please detail it

[migalv]

Hello @apalala-dev just checking in. How is it going with this PR? We are about to launch our first version using CamerAwesome and we are wondering if these changes will be available soon.

[apalala-dev]

Hey @migalv , we are pretty busy atm and we won't be able to work on this PR before a while. :/ We'll let you know when there are updates 👍

[migalv]

Hey @apalala-dev is there any way I can help?

[apalala-dev]

Hey @apalala-dev is there any way I can help?

Hi, sorry for the delay. Did you try this PR? Any opinion on the new API maybe? I'll rebase this morning to mitigate merge conflicts first.

[migalv]

Hey @apalala-dev. Yes I was able to test it. It works as expected and the new API seems fine to me.

Now I'm not too sure how to properly use the PreviewSize & PreviewRect values to properly place my UI. I was getting different values on iOS and Android. Maybe more documentation on how to use these values.

[istornz]

LGTM 👍