James
Animated QR Code Scanner
Currently, OR code is very flexible and convenient for users. Here is a QR code scanner widget. Check out now.
A QR code scanner widget is currently only available for Android (please feel free to submit a pull request for an iOS implementation) by embedding the platform view natively within Flutter.
This project is based on Julius Canute’s Flutter package QR code scanner.
A decorative square is displayed in the center of the screen until a QR code is detected, at which point it is animated to the location of the QR code to highlight it.
Decoded text is passed to the callback function when a QR is detected at the beginning and/or end of the highlight animation.
The location of the detected code on Flutter’s display is calculated again with the Detector and Perspective Transform from zxing, which are ported to Flutter.
In addition, a controller can also store the text and provide basic controls such as turning on the flashlight and restarting the scan.
It is also possible to style the targeting 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
This is a highlight example of it.
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
A special step is to change the color of the insides and the borders of 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
GitHub
https://github.com/kiatuki/animated_qr_code_scanner
