Allow setting alignment for CameraPreview

[migalv]

First let me say Congratulations for your work. The package is amazing! This was so need from the community keep up the good work.

I was trying build a design using CamerAwesome when I found a limitation. I was not able to have widgets that controlled the state of the camera outside of the CameraPreview space.

Here is an example of what I'm trying to acheive

As you can see the buttons are outside of the camera preview.

If let the preview expand, and set BoxFit.contain then the preview stays the same size, but it has black paddings on top and bottom like this:

Container(
  height: null, // No height (fill parent)
  padding: const EdgeInsets.symmetric(horizontal: lateralPadding),
  color: Colors.black,
  child: CameraAwesomeBuilder.custom(
    previewFit: CameraPreviewFit.contain,
    ...
  ),
),

Example with black paddings

It always centers the preview within the boundaries



You can see how it's centering itself with the yellow arrows
This is how it looks with the UI on top

But I try to size the preview to my liking the widgets can no longer be "outside" of the preview

Container(
  height: screenSize.width * aspectRatio, // Set a specific height
  padding: const EdgeInsets.symmetric(horizontal: lateralPadding),
  color: Colors.black,
  child: CameraAwesomeBuilder.custom(
    previewFit: CameraPreviewFit.contain,
    ...
  ),
),

Example with set height

Now my custom UI is on top of the preview
But I want it to be just under as in the first image

Since the buttons depend on the CameraState and this is only accessible from the builder method inside of the CamerAwesomeBuilder.custom constructor, I can not use a Stack to place them outside of the preview.

So I propose 2 options/solutions:

1. Allow the developer to select how to position the Preview within it's boundaries like so:

   CamerAwesomeBuilder.custom(
   previewAlignment: Aligment.topCenter
   ...
   );

2. Allow the dev to pass the CameraConfiguration or a controller object to the CamerAwesomeBuilder widget, so it can control the state of the camera outside of the function. Like this:

   CamerAwesomeBuilder.custom(
   controller: cameraController,
   cameraConfig: config,
   ...

   the dev will be able to access the state stream outside of the builder method so they will be able to stack on top of the preview anything they like. I was thinking of something like this cameraController.setFlashMode() or config.setFlashMode() to acces config and CameraAwesome.of(context).state$ to access its state

[apalala-dev]

Ideally, all of your camera UI should stay in the builder method. I already planned to try to implement the first solution in a future PR, among other things. :) I'll let you know when there are news on that area !

[migalv]

Alright sounds good thanks a lot for the quick response. I'll be looking forward for your PR

[apalala-dev]

I've got the preview alignment working on PR #228

I also added a previewPadding parameter. It should let you position better your UI around the preview if needed.

There is still some work to do on the PR itself before it lands, so if you want to try it earlier you can depend on it and share your thoughts :)

dependencies:   
     camerawesome:
       git:
         url: https://github.com/Apparence-io/CamerAwesome.git
         ref: ui_customization

PS: awesome() constructor is now way more customizable and might fit your needs.

[apalala-dev]

I've got the preview alignment working on PR #228

I also added a previewPadding parameter. It should let you position better your UI around the preview if needed.

There is still some work to do on the PR itself before it lands, so if you want to try it earlier you can depend on it and share your thoughts :)

dependencies:   
     camerawesome:
       git:
         url: https://github.com/Apparence-io/CamerAwesome.git
         ref: ui_customization

PS: awesome() constructor is now way more customizable and might fit your needs.

I found some problems on this branch with aspect ratios, I'll update you again when it's fixed. Don't try this PR yet as it's still buggy, sorry!

[apalala-dev]

Preview aspect ratio should be fixed now, you can try it if you want :)

[migalv]

Great news! I'll try it tomorrow then :)

[migalv]

Hey @apalala-dev I've been testing it. It seems to work as expected. Now I'm not too sure how to properly use the PreviewSize & PreviewRect values to properly place my UI.

[apalala-dev]

Closing this since 1.3 is out with this feature.

You might want to take a look at the updated documentation.

PreviewSize and PreviewRect are a bit more detailed in the barcode example (Scan area part). For most use cases, I think they are not really needed thanks to previewAlignment and previewPadding.

If you still struggle to position your UI, feel free to share your screen (with dummy widgets if you'd like) so we can take a look at what you want to do. 👌