GScanKit – Barcode & QR Code Scanner

GScanKit is an AI-powered Flutter SDK for blazing-fast barcode and QR code scanning. It supports fully customizable overlays, Apple-style border animations, and smart scanning from camera or gallery. Easily scan multiple barcodes, switch cameras, toggle flash, and customize every UI element — AppBar, BottomSheet, FloatingBar, and more. Includes full-screen scanner, animated scan line, and seamless integration — all with Flutter-native performance.

Features #

• Full-Screen Scanner: Seamless full-screen live camera with ultra-fast barcode & QR code detection.
• AI-Powered Accuracy: Fast and smart barcode & QR detection using ML-backed technology.
• Multi-Code Support: Detects and processes multiple barcodes and QR codes at once.
• Apple-Style Animations: Pulse border and scanning line animation inspired by Apple’s scanner UX.
• Custom Overlay UI: Complete control over scanner UI – colors, shapes, borders, blur, size, and style.
• Flash & Camera Toggle: Built-in flashlight toggle and instant front/back camera switching.
• Gallery Image Scan: Instantly scan barcodes and QR codes from user-selected gallery images.
• Auto Zoom: Smart auto-zoom for enhanced barcode focus and readability.
• Overlay Component Control: Customize app bar, floating bar, bottom sheets, and more.
• Developer-Friendly API: Clean architecture, flexible callbacks, and easy Flutter integration.

Default Scanner

Custom AppBar + FloatingBar

Fullscreen Live Camera

Platform Support #

GScanKit is designed primarily for mobile and web environments. It fully supports Android and iOS, offering smooth scanning capabilities across devices. Web support is available with limited features based on browser permissions. Desktop platforms like Windows, macOS, and Linux are currently not supported due to hardware access limitations.

Installation #

Add the following to your pubspec.yaml:

dependencies:
  gscankit: ^latest_version # Replace with the latest version

Then run:

flutter pub get

Platform Setup #

Make sure you have completed the platform-specific setup for the mobile_scanner package. This usually involves adding camera usage descriptions to your Info.plist on iOS.

iOS Permissions #

Ensure these permissions are in your (ios/Runner/Info.plist)**:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan barcodes.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs photo library access to scan barcodes from images.</string>

For detailed platform setup, please refer to the official mobile_scanner documentation.

Android Permissions #

Ensure these permissions are in your android/app/src/main/AndroidManifest.xml:

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

For Android 13+, consider using READ_MEDIA_IMAGES instead of READ_EXTERNAL_STORAGE.

Basic Usage #

Launch the default GscanKit scanner with minimal setup.
Use the onDetect callback to handle scanned barcode results.

import 'package:gscankit/gscankit.dart';
import 'package:flutter/material.dart';

ElevatedButton(
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => GscanKit(
          onDetect: (BarcodeCapture capture) {
            // Handle detected barcode(s) here
          },
        ),
      ),
    );
  },
  child: const Text('Default Scanner'),
);

✅ GScanKit Configuration Options #

Customize the behavior and appearance of the scanner using various configuration parameters.
You can pass these options to the GscanKit widget to tailor it for your app's needs.

🎨 Overlay Styling #

Customize the appearance and behavior of the scanner with flexible options.
You can tweak overlay styles, animation effects, scan border visibility, and more
to match your app's branding or UX needs. Below is a full list of configurable fields:

GscanKit(
  controller: controller, // MobileScannerController instance
  onDetect: (BarcodeCapture capture) {
    // Handle scanned result
  },
  floatingOption: [], // Add custom floating widgets if needed
  gscanOverlayConfig: GscanOverlayConfig(
    scannerScanArea: ScannerScanArea.center, // Focus scan area in center
    scannerBorder: ScannerBorder.visible, // Enable visible border
    scannerBorderPulseEffect: ScannerBorderPulseEffect.enabled, // Apple-style border pulse
    borderColor: Colors.white, // Customize border color
    borderRadius: 24.0, // Rounded border edges
    scannerLineAnimationColor: Colors.green, // Scanning line color
    scannerOverlayBackground: ScannerOverlayBackground.blur, // Blurred camera overlay
    scannerLineAnimation: ScannerLineAnimation.enabled, // Enable line animation
  ),
)

✅ Overlay Styling Options #

Customize the visual appearance of the scanner overlay to match your brand or design preference.

🖼️ Gallery Button Options #

Use the built-in GalleryButton to allow users to scan barcodes from gallery images.
You can place this widget in your UI freely — AppBar, BottomSheet, or FloatingActionButton — and customize it using the icon or child parameter as per your design.

GalleryButton(
  controller: controller, // Pass your MobileScannerController instance
  icon: Icon(CupertinoIcons.photo, size: 18), // Default icon
  isSuccess: ValueNotifier<bool?>(null), // Tracks scan success or failure
),

🔧 Custom Styling Example with child:

GalleryButton(
  controller: controller,
  isSuccess: ValueNotifier<bool?>(null),
  child: Container(
    padding: const EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text("Gallery", style: TextStyle(color: Colors.white)),
  ),
),

✅ GalleryButton is fully customizable. Use child if you want to provide your own styled widget instead of the default icon.

🔁 Switch Camera Example #

You can use the MobileScannerController to control camera behavior like switching between front and back cameras.
Place the toggle icon anywhere in your UI — AppBar, FloatingActionButton, BottomSheet, etc., based on your design needs.

final MobileScannerController controller = MobileScannerController(
  returnImage: true,
);

IconButton.filled(
  style: IconButton.styleFrom(
    backgroundColor: CupertinoColors.systemGrey6,
    foregroundColor: CupertinoColors.darkBackgroundGray,
  ),
  icon: Icon(CupertinoIcons.camera_rotate),
  onPressed: () => controller.switchCamera(),
);

Using controller.switchCamera() toggles between front and back cameras. This is helpful for scanning QR codes from selfies or switching based on user preference.

🔦 Torch Toggle Button Integration #

Use TorchToggleButton with ValueListenableBuilder to reactively handle flashlight on/off state.
You can place this widget anywhere: in the AppBar, BottomSheet, or as a FloatingActionButton.

ValueListenableBuilder(
  valueListenable: controller, // MobileScannerController
  builder: (context, state, child) {
    final isTorchOn = state.torchState == TorchState.on;
    return TorchToggleButton(
      isTorchOn: isTorchOn,
      onPressed: () => controller.toggleTorch(),
    );
  },
),

💡 TorchToggleButton is a customizable widget that changes appearance based on the current torch state.
You can also replace it with your own widget and logic if needed.

🛠 Dependencies #

This package is a polished wrapper over mobile_scanner. It simplifies usage and adds visual polish.

For deep control or if you're troubleshooting:

• Manually control the camera lifecycle
• Tune detection speed and frame throttling
• Configure advanced platform-specific behaviors

See the mobile_scanner docs for more details.

🆘 Troubleshooting #

• Black Screen / Scanner not opening: Ensure permissions are granted and declared correctly.
• Wrong detection: Ensure good lighting, stable hands, and close distance.
• iOS Pod Issues: Try flutter clean, delete Podfile.lock, and run pod install --repo-update.

📄 License #

MIT License. See LICENSE for details.

Copyright © Ayush Maji. Licensed under the MIT LICENSE