Widget Toolkit QR

Widget Toolkit QR package helps developers to add a QR scanner functionality into their applications. It can be used in the authentication process of an application.

This package is a wrapper of mobile_scanner, for more information about the mobile_scanner package, check out its documentation.

Support iOS and Android

Demo

Success Scan Scan Error Permission Asked
Scan Success Scan Error Permission Asked

Widgets

  • QrScannerWidget<T>

QrScannerWidget<T> is the widget, which displays a QR scanner and a loading indicator below the QR scanner. The widget can be configured so it returns the expected value ones the validation has passed.

Functions

  • void showAppCameraPermissionBottomSheet()

showAppCameraPermissionBottomSheet() is a function, which shows a bottom modal sheet with a text message on the screen. You should provide that message telling the user, that he/she should enable the access of the application to the device's camera.

  • void showQrScannerErrorBottomModalSheet()

showQrScannerErrorBottomModalSheet() is a function, which can be used to provide a bottom modal sheet, that displays the error returned from the onError method of QrScannerWidget.

Note: The implementation of the abstract class QrValidationService<T> should be provided to the QrScannerWidget.

Getting started

For Android

Step 1: Configure your project by adding to your_project_root/android/app/build.gradle:

    android {
        compileSdkVersion 34
    }

Step 2: Add in your_project_root/android/gradle.properties:

    android.useAndroidX=true
    android.enableJetifier=true

Step 3: Open the AndroidManifest.xml file in your android/app/src/main directory and add the following device permissions:

   ...
    <uses-permission android:name="android.permission.CAMERA"/>
   ...

For iOS

Open the Info.plist file in your ios/Runner directory and add the following permissions:

    ...
    <key>NSCameraUsageDescription</key>
    <string>Your message to user when the camera is accessed for the first time</string>
    ...

Usage

Step 1: Add widget_toolkit_qr package as a dependency in your pubspec.yaml file:

    $ flutter pub add widget_toolkit_qr

Step 2: If you missed the steps in the #getting-started section now is the time to apply them.

Step 3: Pass the WidgetToolkitTheme and QrScannerTheme extensions to the ThemeData of your app:

MaterialApp(    
  theme: ThemeData.light().copyWith(    
    colorScheme: ColorScheme.fromSwatch(),
    extensions: [ WidgetToolkitTheme.light(), QrScannerTheme.light(), ],
  ),    
  darkTheme: ThemeData.dark().copyWith(    
    colorScheme: ColorScheme.fromSwatch(),    
    extensions: [ WidgetToolkitTheme.dark(), QrScannerTheme.dark(), ],
  ),
);

Note: The WidgetToolkitTheme comes from the Widget Toolkit package which already presence in the Widget Toolkit QR package.
It can be imported with the following line:

    import 'package:widget_toolkit/widget_toolkit.dart';

Step 4: You should provide implementation of QrValidationService<T>, for example:

    class QrService extends QrValidationService<String> {
      @override
      Future<String> validateQrCode(String qrCode) async {
        ///TODO: validate the qr data here
        return qrCode;
      }
    }

Step 5: Import the package with the following line:

    import 'package:widget_toolkit_qr/widget_toolkit_qr.dart';

after which you are ready to start using the widget in your app.

Example for QrScannerWidget<T> usage:

    QrScannerWidget<String>(
      qrValidationService: QrService(),
      onCodeValidated: (result) => showBlurredBottomSheet(
        context: context,
        builder: (ctx) => MessagePanelWidget(
          message: result ?? '',
          messageState: MessagePanelState.positiveCheck,
        ),
      ),
      onError: (error) => showErrorBlurredBottomSheet(
        context: context,
        error: TranslateErrorUtil.translateError(error),
        configuration:
            const ModalConfiguration(showCloseButton: true),
      ),
    )

Customization

We try to make the QrScannerWidget<T> as customised as possible.

qrValidationService

requires an implementation of QrValidationService<T>.

onCodeScanned

is an optional callback which is called right after the QR code has been scanned and before it is passed to the validation service.

onCodeValidated

is an optional callback which returns the result from the validation method.

onError

is an optional callback which return an error no matter if it is a validation error or an error which comes from the QRScanner itself.

cameraPermissionButtonText

an optional property overriding the text in the button, which is in the camera permission bottom modal sheet.

cameraAccessTitleText

an optional property overriding the title of the camera permission bottom sheet.

cameraAccessLabelText

an optional property overriding the content of the error in the camera permission bottom sheet.

cameraPermissionBottomSheetConfiguration

it customises the camera permission bottom sheet behaviour.

spaceBetweenScannerAndLoadingWidget

a double value used to set the space between the QR scanner widget and the loading widget.

isLoadingIndicatorVisible

is a boolean property with a default value true which defines if the loading indicator should be visible while the scanned QR code is processed.

Libraries

widget_toolkit_qr