MagicEye class

A component that provides access to the devices camera and abstracts it's functions.

Cameram uses camera plugin to access the device cameras. Cameram widget provides a camera preview that respects the aspect ratio of the camera.

MagicEye can be pushed to screen by calling push.

  (result) => result.fold(
    (exception) => // Handle exception case
    (path) => // Handle success case. [path] has the path to the file saved

MagicEye can also be pushed manually with Navigator.push. If you do this way, don't forget to dispose the component.

The maximum resolution will be used, unless an alternative resolutionPreset is provided. The cameras access and direction can also be limitated throw allowedCameras and allowedDirections. Trying to select a camera not allowed by allowedCameras will return a UnallowedDirectionError.

If the camera is not yet initialized, loadingWidget will be shown in the place of the preview, centered.


Although MagicEye may be used as is, you can customize it's controlLayer and previewLayer. Both receives the necessary context and expects to return a Widget.

Preview Layer

The Preview Layer is, usually, used for graphical-only widgets, although it accepts any Widget. The canvas is limited to the preview area, so if the preview aspect ratio is different from the device's aspect ratio, the canvas will not include the black area.

MagicEye provide some default preview layers through PackageLayer. An example is PreviewLayer.grid, which shows a grid on the preview to help with the Rule of Thirds.

To make a custom preview layer, previewLayer accepts a Widget Function(BuildContext, PreviewLayerContext). PreviewLayerContext provides the allowedDirections parameter used on MagicEye instatiation. Also, a direction stream emits info about the current device orientation.

Control Layer

The Control Layer is used to render the controls of the camera. Its canvas is the entire device screen. The parameter controlLayer is similar to previewLayer, but provides a ControlLayerContext instead, which gives you access to the camera functions like takePicture.

Mixed in types


MagicEye({Key key, Widget loadingWidget: const CircularProgressIndicator(), Widget previewLayer(BuildContext, PreviewLayerContext): defaultCameraPreviewLayer, ResolutionPreset resolutionPreset: ResolutionPreset.max, DeviceCamera defaultDirection: DeviceCamera.back, Set<DeviceCamera> allowedCameras: const {DeviceCamera.back, DeviceCamera.front}, Set<DeviceDirection> allowedDirections: const {DeviceDirection.portrait, DeviceDirection.landscapeLeft, DeviceDirection.portraitReversed, DeviceDirection.landscapeRight}, AlignmentDirectional previewAlignment: AlignmentDirectional.topCenter})
Creates a MagicEye component.


allowedCameras → Set<DeviceCamera>
The cameras that will be available to the camera.
allowedDirections → Set<DeviceDirection>
The camera directions that will be available to the camera.
controlLayer Widget Function(BuildContext, ControlLayerContext)
The control layer builder.
defaultDirection DeviceCamera
The camera direction that will be used when first opened.
loadingWidget Widget
The widget showed when the camera is still not ready.
previewAlignment AlignmentDirectional
The alignment of the preview in the stack
previewLayer Widget Function(BuildContext, PreviewLayerContext)
The preview layer builder.
resolutionPreset ResolutionPreset
The resolution that will be used on the camera.
hashCode → int
The hash code for this object.
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree.
final, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited


build(BuildContext context) Widget
Describes the part of the user interface represented by this widget. [...]
didChangeAppLifecycleState(AppLifecycleState state) → void
Called when the system puts the app in the background or returns the app to the foreground. [...]
dispose() → void
Releases the widget's resources.
push(BuildContext context) → Future<Either<MagicEyeException, String>>
Pushes the MagicEye to the screen. [...]
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
didChangeAccessibilityFeatures() → void
Called when the system changes the set of currently active accessibility features.
didChangeLocales(List<Locale> locale) → void
Called when the system tells the app that the user's locale has changed. For example, if the user changes the system language settings.
didChangeMetrics() → void
Called when the application's dimensions change. For example, when a phone is rotated.
didChangePlatformBrightness() → void
Called when the platform brightness changes.
didChangeTextScaleFactor() → void
Called when the platform's text scale factor changes.
didHaveMemoryPressure() → void
Called when the system is running low on memory.
didPopRoute() → Future<bool>
Called when the system tells the app to pop the current route. For example, on Android, this is called when the user presses the back button.
didPushRoute(String route) → Future<bool>
Called when the host tells the app to push a new route onto the navigator.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
toStringShort() → String
A short, textual description of this widget.


operator ==(dynamic other) → bool
The equality operator.