good_scanner_overlay 0.1.6

Customizable Flutter scanner overlay with animated scan effects, QR-style presets, and configurable scan box size.

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:

• Repository: https://github.com/ZianFahrudy/good_scanner_overlay
• Issues: https://github.com/ZianFahrudy/good_scanner_overlay/issues