Animated_qr_code_scanner - QR Code Scanner for Flutter with animated targetting box

Overview

Animated QR Code Scanner

A QR code scanner Widget that currently works on Android only (feel free to make pull request on iOS implementation) by natively embedding the platform view within Flutter.

This work is based on Julius Canute's qr_code_scanner Flutter package.

A decorative square is displayed on the middle of the view until a QR code is detected, which will be animated to the location of the QR code to highlight it. Decoded text is passed to callback function when a QR is detected at the beginning and/or the end of highlight animation.

The location of the detected code on the Flutter's display is calculated again with Detector and Perspective Transform from zxing which are ported to Flutter.

A controller can also store the text, and provides basic controls such as turning on flashlight and restarting the scan.

It is also possible to style the targetting box.

Demo

Animation Demo

Setup

Modify the android-level build.gradle (\android\build.gradle) gradle to 3.3.1

dependencies {
    classpath 'com.android.tools.build:gradle:3.3.1'
    ...
}

Modify the app-level build.gradle (\android\app\build.gradle) minSdkVersion to at least 24

defaultConfig {
    ...
    minSdkVersion 24
    ...
}

Installing

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  animated_qr_code_scanner:
    git:
      url: https://github.com/kiatuki/animated_qr_code_scanner.git
      ref: v0.1.7

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:animated_qr_code_scanner/animated_qr_code_scanner.dart';

Example

When a QR code is detected, print the decoded text on the console and start animating the targetting box to highlight the detected QR code. Then after the QR code has been highlighted, show a dialog to let user choose whether to re-scan or confirm the code. A page with the code is displayed if user confirms the code.

class TestPage extends StatelessWidget {
  final AnimatedQRViewController controller = AnimatedQRViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: AnimatedQRView(
              squareColor: Colors.green.withOpacity(0.25),
              animationDuration: const Duration(milliseconds: 400),
              onScanBeforeAnimation: (String str) {
                print('Callback at the beginning of animation: $str');
              },
              onScan: (String str) async {
                await showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text("Callback at the end of animation: $str"),
                    actions: [
                      FlatButton(
                        child: Text('OK'),
                        onPressed: () {
                          Navigator.of(context).pop();
                          Navigator.of(context).pop();
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => Scaffold(
                                body: Align(
                                  alignment: Alignment.center,
                                  child: Text("$str"),
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                      FlatButton(
                        child: Text('Rescan'),
                        onPressed: () {
                          Navigator.of(context).pop();
                          controller.resume();
                        },
                      ),
                    ],
                  ),
                );
              },
              controller: controller,
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                  color: Colors.blue,
                  child: Text('Flash'),
                  onPressed: () {
                    controller.toggleFlash();
                  },
                ),
                const SizedBox(width: 10),
                FlatButton(
                  color: Colors.blue,
                  child: Text('Flip'),
                  onPressed: () {
                    controller.flipCamera();
                  },
                ),
                const SizedBox(width: 10),
                FlatButton(
                  color: Colors.blue,
                  child: Text('Resume'),
                  onPressed: () {
                    controller.resume();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Flashlight

By default, the flashlight is OFF.

controller.toggleFlash();

Resume/Pause

Pause camera stream and scanner.

controller.pause();

Resume camera stream and scanner.

controller.resume();

Styling the Targetting Square

Change the color of the insides and the borders of targetting square, and the animation duration

AnimatedQRView(
    squareColor: Colors.teal.withOpacity(0.25),
    squareBorderColor: Colors.cyan,
    animationDuration: const Duration(milliseconds: 400),
    ...
),

Todos

QR Detector still detects barcode even with intent changed

Compute the QR corners in native-layer instead of in Flutter-layer

Implementation for iOS

Animation for front camera is incorrect

Comments
  • QR goes black when animated in Android

    QR goes black when animated in Android

    My Qr show Black after I zoomed In. What can possibly went wrong ? As My following code :

    Library I used: animated_qr_code_scanner: {i used the latest 0.1.7}

    bool _topContainerHasFocus = true;
    ...
    ...
      void _switchFocus() {
        if (_topContainerHasFocus) {
          _topContainerHeight = _shrunkenHeight;
          _bottomContainerHeight = _focusedHeight;
          _topContainerHasFocus = false;
        } else {
          _topContainerHeight = _focusedHeight;
          _bottomContainerHeight = _shrunkenHeight;
          _topContainerHasFocus = true;
        }
      }
    ...
    
    ...
      AnimatedQRView scannerFunctionality() {
        return AnimatedQRView(
          squareBorderColor: Colors.blue,
          animationDuration: const Duration(
            milliseconds: 40,
          ),
          onScanBeforeAnimation: (String str) {
            debugPrint(str);
          },
          onScan: (String something) {
            debugPrint(something);
          },
          controller: controller,
        );
      }
    
      AnimatedContainer qrScanner() {
        return AnimatedContainer(
          duration: const Duration(milliseconds: 60),
          curve: Curves.bounceIn,
          child: GestureDetector(
            onTap: () {
              setState(() {
                _switchFocus();
                resumeScanner();
              });
            },
            child: Container(
              width: _bottomContainerHeight * 0.75,
              height: _bottomContainerHeight * 0.75,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(12)),
                color: Colors.white,
              ),
              child: Expanded(
                flex: 5,
                child: scannerFunctionality(),
              ),
            ),
          ),
        );
      }
    

    and I got error like

    I/Camera  (19607): handleMessage: 16
    D/BufferQueueProducer(19607): [SurfaceTexture-0-19607-0](this:0x7b0559a800,id:0,api:1,p:577,c:19607) cancelBuffer: slot 0
    I/BufferQueueProducer(19607): [SurfaceTexture-0-19607-1](this:0x7af2c36000,id:1,api:4,p:654,c:19607) queueBuffer: slot 2 is dropped, 
    
    opened by johnmelodyme 1
  • debugLifecycleState != _ElementLifecycle.defunct': is not true

    debugLifecycleState != _ElementLifecycle.defunct': is not true

    Hi what should i do because i always get this error ════════ (953) Exception caught by animation library ═══════════════════════════════════════════════ 'package:flutter/src/widgets/framework.dart': Failed assertion: line 3867 pos 12: '_debugLifecycleState != _ElementLifecycle.defunct': is not true.

    opened by seyhadot 1
  • Deprecated due to Null-Safety

    Deprecated due to Null-Safety

    Error: Cannot run with sound null safety, because the following dependencies
    don't support null safety:
    
     - package:animated_qr_code_scanner
     - package:qr_code_scanner
    
    opened by johnmelodyme 0
  • Plugin update to Android V2

    Plugin update to Android V2

    The plugins animated_qr_code_scanner use a deprecated version of the Android embedding.

    To avoid unexpected runtime failures, or future build failures, try to see if these plugins support the Android V2 embedding. Otherwise, consider removing them since a future release of Flutter will remove these deprecated APIs.

    If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.

    opened by Hemanth10081999 0
  • IOS still in making

    IOS still in making

    Hi, First of all thanks for this asset. It really gives a nice touch to an otherwise classic functionality.

    I just wanted to know if an iOS development was still in the making ?

    Regards

    opened by AlexandreRousseau36 1
Releases(v0.1.7)
Owner
Kiat Stanley
Kiat Stanley
bq Scanner : An QR Code and Barcode Scanner and Generator.

bq Scanner A Barcode Scanner. A QR Code Scanner. A Barcode Generator. A QR Code Generator. Visit bq Scanner at https://ritikpatle.github.io/bqscanner/

Ritik Patle 4 Jun 5, 2022
QR Scanner and Barcode Scanner app

qr_scan_code A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Muhammad Abair Mutarraf 18 Dec 8, 2022
A full screen mobile scanner for scanning QR Code and Bar Code.

Flutter QR Bar Scanner A Full Screen Scanner for Scanning QR code and Barcode using Google's Mobile Vision API Reading & Scanning QR/Bar codes using F

Lutfor Rahman 31 Oct 5, 2022
A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
A QR code/ barcode scanner made using Flutter.

QR Scanner A Flutter based QR/Bar code scanner app with dark mode and material design. Scan QR codes. Scan barcodes. Show result in a popup. Clicking

Hash Studios 10 Nov 15, 2022
🛠 Flutter QR code scanner plugin.

Language: English | 中文简体 QR Code Scanner A Flutter plugin ?? to scanning. Ready for Android ?? github Permission: <uses-permission android:name="andro

Sword 349 Dec 20, 2022
FlutterQRcode - Flutter QR Code Scanner app for a specific type of QR using GetX State Management Architecture

qrcode A new Flutter QR Scanner Project for Data Entry using GetX state manageme

null 8 Dec 11, 2022
QR-Scanner - Flutter App To Scan QR Code

QR-Scanner App To Scan QR Code QR-Scanner.mp4 Features: Scan QR Codes Scan 2D Ba

null 7 Nov 2, 2022
Flutter-Animated-Library-of-Books - Flutter App - Animated Book Library

bookshelf A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Ulfhrafn 1 Dec 4, 2022
Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated Shimmer Supports Null Safety A simple & lightweight widget to display a

Shubham Soni 7 Apr 27, 2022
Flutter-pinbox - UI for enter a PIN on flutter/dart, one digit per textField box.

flutter-pinbox This is a library for enter a PIN on flutter/dart. You can enter one digit per textField box. The detail The library locate at path lib

null 2 Feb 26, 2022
This is a Flutter app which shows how to add a Fitted Box in you App

fittedbox A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Shehzaan Mansuri 1 Oct 25, 2021
A custom bottom navigation bar with box animation for flutter

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way. De

SHIVAM SONI 1 Jul 31, 2022
Flutter Cupertino text box which can be used to select a date with CupertinoDatePicker

Flutter Cupertino Date Text Box A text box with an attached CupertinoDatePicker which opens when the text box is tapped. With this library the followi

Christoph Rothermel 5 Feb 13, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
Flutter Inset Box Shadow

Flutter Inset Box Shadow Flutter currently does not support the inset property for shadows. This type of shadow is for example used in Neumorphism. Th

Qoumo 14 Dec 3, 2022
Hive Wait provide a Hive repository to calling methods in the box as async.

Hive Wait provide a Hive repository to calling methods in the box as async.

Giáo Hồ 1 May 10, 2022
A document scanner plugin for flutter

document_scanner_flutter A document scanner + PDF generator plugin for flutter Getting Started Installing document_scanner_flutter: ^0.2.3 Basic Usage

Ishaq Hassan 32 Dec 2, 2022
Barcode scanner plugin for flutter. Supports barcode scanning for Android and iOS

flutter_barcode_scanner A plugin for Flutter apps that adds barcode scanning support on both Android and iOS. Try example Just clone or download the r

Amol Gangadhare 325 Jan 6, 2023