[Camera] Camera Preview accepts only single child

Help Widgets
,
1

Hey there,

I am using the camera package (version 0.10.6) in which I am able to see the CameraPreview. By looking in the code of the CameraPreview, I have noticed the widget accepts a child: Widget which is placed in a Stack. I initially thought it would be more logical to pass multiple child widgets instead of a single child to create more desirable layouts. However, in various articles and tutorials online, I often see people wrapping the CameraPreview in their own Stack (example). This approach feels somewhat unnecessary just to create ‘complex layouts’ on top of CameraPreview.

Could someone clarify whether the given example is a valid approach, or if there are better alternatives? Any suggestions or feedback are welcome. If I could give an example of a ‘complex layout’, I would take the Snapchat camera preview as a good example:

Image
Image800×1375 54.9 KB

Taken from: Business Insider

Code from camera_preview.dart:

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import '../camera.dart';

/// A widget showing a live camera preview.
class CameraPreview extends StatelessWidget {
  /// Creates a preview widget for the given camera controller.
  const CameraPreview(this.controller, {super.key, this.child});

  /// The controller for the camera that the preview is shown for.
  final CameraController controller;

  /// A widget to overlay on top of the camera preview
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return controller.value.isInitialized
        ? ValueListenableBuilder<CameraValue>(
            valueListenable: controller,
            builder: (BuildContext context, Object? value, Widget? child) {
              return AspectRatio(
                aspectRatio: _isLandscape()
                    ? controller.value.aspectRatio
                    : (1 / controller.value.aspectRatio),
                child: Stack(
                  fit: StackFit.expand,
                  children: <Widget>[
                    _wrapInRotatedBox(child: controller.buildPreview()),
                    child ?? Container(),
                  ],
                ),
              );
            },
            child: child,
          )
        : Container();
  }

  Widget _wrapInRotatedBox({required Widget child}) {
    if (kIsWeb || defaultTargetPlatform != TargetPlatform.android) {
      return child;
    }

    return RotatedBox(
      quarterTurns: _getQuarterTurns(),
      child: child,
    );
  }

  bool _isLandscape() {
    return <DeviceOrientation>[
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight
    ].contains(_getApplicableOrientation());
  }

  int _getQuarterTurns() {
    final Map<DeviceOrientation, int> turns = <DeviceOrientation, int>{
      DeviceOrientation.portraitUp: 0,
      DeviceOrientation.landscapeRight: 1,
      DeviceOrientation.portraitDown: 2,
      DeviceOrientation.landscapeLeft: 3,
    };
    return turns[_getApplicableOrientation()]!;
  }

  DeviceOrientation _getApplicableOrientation() {
    return controller.value.isRecordingVideo
        ? controller.value.recordingOrientation!
        : (controller.value.previewPauseOrientation ??
            controller.value.lockedCaptureOrientation ??
            controller.value.deviceOrientation);
  }
}
2

It is a standard pattern for a class to provide a singular child: parameter. If you need multiple children there, you wrap them into one of the multi-child layout widgets. Seems straightforward. Why should the camerapreview duplicate all the logic of Stack?

3 Likes