An abstraction on top of flutter camera.

Overview

MagicEye

An abstraction on top of flutter camera.

Version Build License

Features

  • Provides the lower level handling of the camera plugin
    • Handles all camera resources
    • Handle camera status when app activity change
  • Can be used out-of-the-box by simply calling MagicEye().push(context)
  • Can be customized with layers
  • Come with a few, pre-baked, preview layers
  • Has a functional API leveraged by dartz

Version compatibility

  • Dart: 2.7.0
  • Flutter: 1.12.13+hotfix.5 (stable)

See CHANGELOG.md for all breaking (and non-breaking) changes.

Getting started

Add magiceye as a dependency in your project:

dependencies:
  magiceye: ^0.1.7

After this, you should then run flutter packages upgrade or update your packages with your IDE/editor funcionalities.

Finally, follow the camera installations instructions for iOS and Android.

Usage

If you want to use MagicEye default camera widget, you can do this by calling MagicEye.push:

Future<Either<MagicEyeException, String>> result = await MagicEye().push(context);
result.fold(
    (exception) => // Handle exception case
    (path) => // Handle success case. [path] has the path to the file saved
);

Disclaimer: MagicEye widget can be used with Navigator.push instead. However, the disposal of resources won't be handled automatically. Use with caution.

You can customize some functionality of the camera passing parameters to the MagicEye constructor. For detailed info, consult its page on the documentation.

Layers

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.

You can see examples of custom layers in the source:

In the near future, more and simpler examples will be provided in the example.

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 PreviewLayer. 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.


For bugs or additional info, feel free to open an issue.

Comments
  • question: possible to take multiple photos without leaving camera?

    question: possible to take multiple photos without leaving camera?

    Hi there,

    Looks like a fantastic package! I was wondering if it's possible to take multiple photos without actually leaving the camera screen?

    I'm working on an app where the user may want to take multiple photos at once (similar to iOS burst mode).

    Thanks! James

    question 
    opened by jamesdixon 4
  • example crashes

    example crashes

    I took a photo, and then got an exception.

    The getter 'value' was called on null.
    Receiver: null
    Tried calling: value
    
    The relevant error-causing widget was
        MaterialApp 
    lib/main.dart:20
    When the exception was thrown, this was the stack
    #0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:53:5)
    #1      CircleButton.build 
    package:magiceye/…/extra/circle_button.dart:29
    #2      StatelessElement.build 
    package:flutter/…/widgets/framework.dart:4291
    #3      ComponentElement.performRebuild 
    package:flutter/…/widgets/framework.dart:4223
    #4      Element.rebuild 
    package:flutter/…/widgets/framework.dart:3947
    ...
    ════════════════════════════════════════════════════════════════════════════════
    
    ════════ Exception caught by widgets library ═══════════════════════════════════
    The getter 'value' was called on null.
    Receiver: null
    Tried calling: value
    The relevant error-causing widget was
        MaterialApp 
    
    calling value on null.
    
    class CircleButton extends StatelessWidget {
    final IconData icon;
    final void Function() onPressed;
    final BehaviorSubject orientationStream;
    
    const CircleButton({
    Key key,
    @required this.icon,
    this.onPressed,
    this.orientationStream,
    }) : assert(icon != null),
    super(key: key);
    
    Widget build(BuildContext context) {
    Tuple2<int, int> orientations = Tuple2(0, 0);
    
    return Circle(
      radius: 25,
      child: StreamBuilder<DeviceDirection>(
        initialData: orientationStream.value,    <-- orientationStream is null
    
    bug 
    opened by sgehrman 3
  • Make it possible to take multiple photos sequentially

    Make it possible to take multiple photos sequentially

    As discussed on #6, although it's not currently viable to provide a way to make burst capture of images, it is possible to provide a way to take photos sequentially asynchronously.

    This will be made by, instead of returning a Future<String> containing the path to the taken picture, provide a way to pass a Stream<String> where the MagicEye page will add each taken photo.

    This will, possibly, require changes on the API, making it a breaking change.

    enhancement 
    opened by mateusfccp 5
  • Make package safer with NNBD

    Make package safer with NNBD

    Dart 2.7 released it's null-safety preview.

    With this feature, Dart will be able to make all the null checks on compile-time instead of runtime, which is safer.

    This experimental work has started on nnbd branch, and is not stable.

    enhancement 
    opened by mateusfccp 1
  • Make tests for default behavior of MagicEye component

    Make tests for default behavior of MagicEye component

    Some kind of regressions may be prevented by writing tests that reproduce the default behavior of the component.

    Of course, it's not a trivial task to cover all the cases, but the simplest ones, like the regression of #3, could be prevented by the pipeline.

    Said so, we may use the example itself to reproduce the expected simple behaviors of the camera.

    enhancement 
    opened by mateusfccp 1
  • Provide a more diverse example

    Provide a more diverse example

    The current example is stable and works as it is. However, it has only the simplest configuration possible.

    It would be nice to have an example with diverse MagicEye possibilities, to show a little more of it's potential and help newcomers with more complex cases.

    documentation good first issue 
    opened by mateusfccp 0
  • Handle different aspect ratios

    Handle different aspect ratios

    Currently, the CameraPreview is aligned to the bottom.

    When a device has an higher aspect ratio than the camera's, a black area will appear at the top, in the remaining space.

    This is not that bad. However, MagicEye could handle it better, like Android default camera does.

    Reference

    My device (Xiaomi Mi 2 Lite) has a aspect ratio of 18:9. This is how Android camera handle aspect ratios:

    18:9: When the camera matches the device aspect ratio, the preview is fullscreened.

    18-9

    16:9: When the camera aspect ratio is a little lower, the top control area becomes black, and the bottom remains as in 18:9.

    16-9

    4:3: When the aspect ratio is considerably lower, both top and bottom control areas become black and the preview is in between them.

    4-3

    Issue

    The main issue on implementing this is the consideration about control layers. I can make the default camera layer behave well without much effort. However, what if someone would want to provide a custom control layer where all the controls should be at the bottom or top, for instance?

    Considering this, it's possible to:

    1. Ignore the issue. This is easier and won't break anything.
    2. Provide a way to control the preview positioning with the control layer API. This takes more time and may result on a more complex API, or even API breakage.
    enhancement 
    opened by mateusfccp 1
Releases(v0.1.5)
Owner
Mateus Felipe C. C. Pinto
25 years, theology bachelor.
Mateus Felipe C. C. Pinto
A NestedScrollView that supports outer scroller to top overscroll.

custom_nested_scroll_view A NestedScrollView that supports outer scroller to top overscroll. ?? Preview Web demo ?? Click Here ?? Problem NestedScroll

null 20 Nov 25, 2022
A flutter widget that show the camera stream and allow ML vision recognition on it, it allow you to detect barcodes, labels, text, faces...

Flutter Camera Ml Vision A Flutter package for iOS and Android to show a preview of the camera and detect things with Firebase ML Vision. Installation

Rushio Consulting 257 Jan 2, 2023
A mobile image uploader in which you can upload image to your personal gallery from either your camera or mobile gallery and it can detect your current geographic location and address using firebase firestore and storage.

Image Uploader In Flutter About It is an Image Uploader gallery which tracks your address from which you're uploading using Flutter and Image picker.

Prahen parija 6 Dec 20, 2022
With ML Kit's face detection API, you can detect faces in an camera or image, Note that the API detects faces, it does not recognize people

Face Detection This project is a starting point for a Flutter application. Getting Started For help getting started with Flutter, view our online docu

Nashwan Abdullah 21 Dec 29, 2022
Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Pawan Kumar 1.5k Jan 8, 2023
a project for learning all Flutter Widgets , sync from flutter.dev the officia website.

Flutter Widgets Catalog (WIP) 计划 1、使用Flutter开发一个全平台的Flutter Widgets Catalog APP,并且开源。在这个APP中可以通过图形化的方式查看所有Widgets的介绍,示例,视频教程。 2、所有文档内容由前一天从flutter.dev

ezshine 32 Aug 3, 2022
A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案)

A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案) 100% 还原 UI,只需要按照设计图写的宽高写即可 先看图片,设置的标准宽度是 360 iPhone 8 --------------------------

聂志洋 108 Sep 27, 2022
Flutter 2.0 (Null safety) Basic, Dynamic & Silver style Staggered Grid views made using flutter staggered grid view package. 🦺

Staggered Grid View Developement Stack Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Nakshatra Singh 9 Oct 28, 2022
A Flutter package that makes it easy to customize and work with your Flutter desktop app's system tray.

system_tray A Flutter package that that enables support for system tray menu for desktop flutter apps. on Windows, macOS and Linux. Features: - Modify

AnTler 140 Dec 30, 2022
Email and Password Authentication In Flutter & Firebase in Flutter 2.2

Email and Password Authentication In Flutter & Firebase in Flutter 2.2

BackSlash Flutter 43 Nov 23, 2022
Learn Flutter on Flutter! A widget directory with implementation samples!

Fludget Browse through a variety of widgets used in flutter This application is developed to learn Flutter using Flutter. Different widgets used in fl

ACM VIT 29 Nov 23, 2022
A Flutter package that makes it easy to customize and work with your Flutter desktop app window.

bitsdojo_window A Flutter package that makes it easy to customize and work with your Flutter desktop app window on Windows, macOS and Linux. Watch the

Bits Dojo 606 Dec 27, 2022
DoneIt is a sample note app 📝 Flutter application 📱 built to demonstrate use of Clean Architecture tools. Dedicated to all Flutter Developers with ❤️.

DoneIt ?? DoneIt is a sample note app ?? Flutter application ?? built to demonstrate use of Clean Architecture tools. Dedicated to all Flutter Develop

Shubham Chhimpa 175 Dec 24, 2022
Utility Manager Flutter Application is made with Flutter and Supabase which allows user to add task, set remainder to the task, set color to separate tasks and it allows to add URL with URL's informations.

Utility Manager Flutter Application! Utility Manager Flutter Application is made with Flutter and Supabase which allows user to add task, set remainde

Kathirvel Chandrasekaran 6 Jan 6, 2022
My first Flutter project - a recipes app, from the book Flutter Apprentice.

recipes My first Flutter project - a recipes app, from the book Flutter Apprentice. Getting Started This project is a starting point for a Flutter app

Adatta1276 1 Dec 28, 2021
Projeto Flutter sendo desenvolvido para a Formação Flutter da plataforma Alura

ByteBank / A Flutter Journey Table of Contents About • Features • ?? About This is a project being developed for a Flutter couse in Alura plataform, s

Mike Jhoe 1 Oct 25, 2021
Plugins for Flutter maintained by the Flutter team

Flutter plugins This repo is a companion repo to the main flutter repo. It contains the source code for Flutter first-party plugins (i.e., plugins dev

Flutter 16.6k Dec 29, 2022
QR.Flutter is a Flutter library for simple and fast QR code rendering via a Widget or custom painter.

QR.Flutter is a Flutter library for simple and fast QR code rendering via a Widget or custom painter. Need help? Please do not submit an issue for a "

Yakka 612 Jan 4, 2023