Good Scanner Overlay

good_scanner_overlay is a Flutter scanner overlay widget for QR and barcode flows. It includes multiple animation styles, configurable border and blur treatments, and customizable scan box dimensions.

Features

  • Multiple overlay styles: classic, refined, and modern
  • Center scan line and full-width sweep animations
  • Optional overlay background and border layers
  • Custom scan box width and height
  • Custom border radius, corner radius, and scan line thickness
  • Example app with docs-style presets

Preview

Simple Like Jago QRIS Like BRI QRIS Custom background

Installation

Add the package to your pubspec.yaml:

dependencies:
  good_scanner_overlay: ^0.1.6

Quick Start

Stack(
  children: [
    MobileScanner(),
    GoodScannerOverlay(
      animationColor: Colors.yellow,
      borderColor: Colors.red,
      borderRadius: 0,
      cornerRadius: 20,
      goodScannerAnimation: GoodScannerAnimation.center,
      goodScannerOverlayBackground: GoodScannerOverlayBackground.center,
      goodScannerBorder: GoodScannerBorder.center,
    ),
  ],
)

Custom Scan Box Size

You can define the scan box width and height directly:

GoodScannerOverlay(
  scanBoxWidth: 300,
  scanBoxHeight: 210,
  lineThickness: 8,
)

Main Options

GoodScannerOverlay(
  style: GoodScannerOverlayStyle.refined,
  animationColor: Colors.green,
  borderColor: Colors.green,
  borderRadius: 24,
  cornerRadius: 24,
  scanBoxWidth: 300,
  scanBoxHeight: 210,
  lineThickness: 8,
  goodScannerAnimation: GoodScannerAnimation.center,
  goodScannerOverlayBackground: GoodScannerOverlayBackground.center,
  goodScannerBorder: GoodScannerBorder.center,
)
  • style: overlay visual style
  • goodScannerAnimation: center, fullWidth, or none
  • goodScannerOverlayBackground: show or hide the overlay mask
  • goodScannerBorder: show or hide the border
  • borderRadius: transparent cutout radius
  • cornerRadius: border corner radius
  • scanBoxWidth: custom scan box width
  • scanBoxHeight: custom scan box height
  • lineThickness: scan line or sweep thickness
  • backgroundWidget: custom widget behind the blurred overlay

Example App

A complete demo app is included in the example/ folder. It contains the same presets shown in the package docs:

  • Simple
  • Like Jago QRIS
  • Like BRI QRIS
  • Custom background

Notes

  • The default behavior remains backward compatible when scanBoxWidth and scanBoxHeight are not provided.
  • Different styles use slightly different default geometry to better match their visual treatment.

Support

Issues and feature requests are welcome:

Libraries

good_scanner_overlay
A customizable Flutter scanner overlay with animated scan effects, optional borders, optional masked background, and configurable scan box size.