Giter Site home page Giter Site logo

qr-bar-code-scanner-dialog's Introduction

QR/Bar Code Scanner Dialog

Plugin to show a simple scanner dialog and capture Bar/QR code easily. Works with Android, iOS, and Web. It uses html5-qrcode js library for web and qr_code_scanner for Android and iOS

Note:

At present, this is the only flutter web plugin that supports barcode scanning

Get Scanned QR/Bar Code

When a QR code is recognized, the text identified will be passed to function callback onCode.

class _MyAppState extends State<MyApp> {

  final _qrBarCodeScannerDialogPlugin = QrBarCodeScannerDialog();
  String? code;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Builder(builder: (context) {
          return Material(
            child: Center(
              child: ElevatedButton(
                  onPressed: () {
                    _qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
                        context: context,
                        onCode: (code) {
                          setState(() {
                            this.code = code;
                          });
                        });
                  },
                  child: Text(code ?? "Click me")),
            ),
          );
        }),
      ),
    );
  }
}

Android Integration

In order to use this plugin, please update the Gradle, Kotlin, and Kotlin Gradle Plugin:

In android/build.gradle change ext.kotlin_version = '1.3.50' to ext.kotlin_version = '1.5.10'

In android/build.gradle change classpath 'com.android.tools.build:gradle:3.5.0' to classpath 'com.android.tools.build:gradle:4.2.0'

In android/gradle/wrapper/gradle-wrapper.properties change distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip to distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip

In android/app/build.gradle change defaultConfig{ ... minSdkVersion 16 } to defaultConfig{ ... minSdkVersion 20 }

Warning

If you are using Flutter Beta or Dev channel (1.25 or 1.26) you can get the following error:

java.lang.AbstractMethodError: abstract method "void io.flutter.plugin.platform.PlatformView.onFlutterViewAttached(android.view.View)"

This is a bug in Flutter which is being tracked here: flutter/flutter#72185

There is a workaround by adding android.enableDexingArtifactTransform=false to your gradle.properties file.

iOS Integration

In order to use this plugin, add the following to your Info.plist file:

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes</string>

Web Integration

No need to update anything, the plugin appends the HTML contents to the DOM.

qr-bar-code-scanner-dialog's People

Contributors

afinas-nl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

qr-bar-code-scanner-dialog's Issues

Customize Dialog

Hi @Afinas-nl. You saved my life. I was struggeling to find something easy and good for the web and this is exactly what i was searching for.
I have only a question: can I customize the dialog (for example: change the circularprogressindicator and the button 'stop scanning')?

Thanks for package.

Thanks for package. It is very nice

Can you add a button to activate the device flash next to the "Stop scannig" button?

How to shorten the result?

Hi. I implemented it, thank you!!
The result looks like "Code scanned = 234234234234". How can I get "234234234234" without thе additional text?
2023-12-03_22-11-05

Working on Long press on small screen but not ontap.

_qrBarCodeScannerDialogPlugin.getScannedQrBarCode(); it is working fine on large screens, but when I open it on small screens and mobile, it works on long Press to open dialog rather than on tap.

My on Tap function:

onTap: () {
_qrBarCodeScannerDialogPlugin.getScannedQrBarCode(
context: context,
onCode: (code) {
setState(() {
this.qrCode = code!;
});
if (qrCode != '') {
showDialog(
context: context,
builder: (context) {
return Container(
color: R.colors.white,
child: AppLoader(),
);
})
.then((value) =>
context.go('/homeView/menuView'));
}
});
},

QR scan doesn't scan QR codes.

Hi, I implemented this. And when I try to scan it does nothing. What could be the problem?
And when I open the scanner, the camera is wider than the overlay, is it possible to fix that?

Error: Locations: No module for https://unpkg.com/html5-qrcode

tl;dr web app using qr_bar_code_scanner_dialog has this error: "Locations: No module for https://unpkg.com/html5-qrcode".

Longer version:
Thanks so much for putting this package together. There's a definite need of a barcode scanner that works reliably for PWAs - I've been trying several of them over the last 24hrs and they all had varying issues so I was excited to try qr_bar_code_scanner_dialog. Everything seemed promising but once I was at the video view my debug console showed 6 "Locations: No module for https://unpkg.com/html5-qrcode" errors and I wasn't able to get a successful scan. I was on stable Flutter 3.3.4 so, as an experiment, I downgraded to stable 3.3.3 and tried again but I have the same issue. Is anyone else seeing this issue? I've double checked the install instructions (" Web Integration -- No need to update anything, the plugin appends the HTML contents to the DOM") -- the install is so straightforward (one of the great features of this package) I don't think I've missed anything, but maybe I have?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.