Flutter – Expand CameraPreview to fit device width

To expand the CameraPreview to match the full width of the device, you can use the LayoutBuilder widget to get the available width and set the appropriate aspect ratio for the CameraPreview. Here’s how you can modify your code:

return LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    final screenWidth = constraints.maxWidth;
    final screenHeight = constraints.maxHeight;

    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded(
          child: GestureDetector(
            onTapUp: (details) {
              focusOnTap(details);
            },
            onScaleStart: (details) {
              zoom = _scaleFactor;
            },
            onScaleUpdate: (details) {
              if (currentCamera == widget.normalCamera) {
                onZoomChange(details.scale);
              }
            },
            child: Stack(
              children: [
                AspectRatio(
                  aspectRatio: cameraController.value.aspectRatio,
                  child: CameraPreview(cameraController),
                ),
               // top banner
                Positioned.fill(
                  child: Container(
                    color: Colors.black.withOpacity(0.5),
                    // Add your top banner content here
                  ),
                ),
                // bottom banner
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      color: Colors.black.withOpacity(0.5),
                      // Add your bottom banner content here
                    ),
                  ),
                ),
                // zoom selector
                Positioned.fill(
                  child: Align(
                    alignment: Alignment.center,
                    child: Container(
                      // Add your zoom selector content here
                    ),
                  ),
                ),
                // top actions
                SafeArea(
                  child: Container(
                   // Add your top actions content here
                  ),
                ),
              ],
            ),
          ),
        ),
        // bottom actions
        GestureDetector(
          onHorizontalDragEnd: (details) {
            cameraController.dispose();
            widget.onSwipe(details);
          },
          child: Container(
            // Add your bottom actions content here
          ),
        ),
      ],
    );
  },
);

Here’s what’s changed:

1. We wrap the entire Column with a LayoutBuilder widget to get the available width and height of the screen.
2. Inside the LayoutBuilder, we calculate the screenWidth and screenHeight based on the constraints.
3. We replace the CameraPreview with an AspectRatio widget, which will maintain the aspect ratio of the camera preview while expanding it to the full width of the screen.
4. We set the aspectRatio of the AspectRatio widget to cameraController.value.aspectRatio, which ensures that the camera preview maintains its original aspect ratio.
5. We adjust the positioning of the top and bottom banners using Positioned.fill and Align to ensure they cover the entire screen width.
6. We adjust the positioning of the zoom selector and top actions to maintain their desired positions.
7. We adjust the positioning of the bottom actions to maintain their desired position.

By wrapping the CameraPreview with an AspectRatio widget and using LayoutBuilder to get the available width and height, the camera preview will now expand to match the full width of the device while maintaining its aspect ratio.