QR Code Scanner for Flutter with animated targetting box

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

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

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.resumecamera();
                        },
                      ),
                    ],
                  ),
                );
              },
              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.resumecamera();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

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