Flutter QR Code Scanner: A Complete Guide

Hey guys! Today, we’re diving deep into the world of Flutter to explore how to implement a QR code scanner in your apps. QR codes are everywhere, from scanning product details to making quick payments. Adding this functionality to your Flutter app can really enhance user experience and open up a world of possibilities. So, let’s get started!

Why Use QR Codes in Your Flutter App?

Before we jump into the code, let’s talk about why you might want to add a QR code scanner to your Flutter app. QR codes offer a fast and efficient way to transfer information. Instead of manually typing in URLs or product codes, users can simply scan a QR code and instantly access the data.

• Convenience: QR codes make it super easy for users to access information without typing.
• Efficiency: Scanning a QR code is much faster than manually entering data.
• Versatility: QR codes can be used for a wide range of applications, from marketing to payments.
• User Experience: Adding a QR code scanner can significantly improve the overall user experience of your app.

Getting Started: Setting Up Your Flutter Project

First things first, let’s set up a new Flutter project. If you already have a project, you can skip this step. Open your terminal and run the following command:

flutter create flutter_qr_scanner
cd flutter_qr_scanner

This will create a new Flutter project named flutter_qr_scanner . Now, open the project in your favorite IDE (like VS Code or Android Studio).

Next, we need to add the necessary dependencies to our pubspec.yaml file. We’ll be using the qr_code_scanner package, which provides a simple and easy-to-use QR code scanning functionality. Open your pubspec.yaml file and add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  qr_code_scanner: ^1.0.1 # Use the latest version

Make sure to run flutter pub get to install the dependencies.

Setting up the basic UI

Now that we have the dependencies lets create the UI for the QR code scanner. This includes setting up the camera view, handling permissions, and displaying the scan results. We’ll need to create a basic layout that includes a QRView widget to display the camera feed and a Text widget to show the scanned data.

Open your lib/main.dart file and replace the existing code with the following:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter QR Scanner',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QRScannerScreen(),
    );
  }
}

class QRScannerScreen extends StatefulWidget {
  @override
  _QRScannerScreenState createState() => _QRScannerScreenState();
}

class _QRScannerScreenState extends State<QRScannerScreen> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  Barcode? result;
  QRViewController? controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Code Scanner')),
      body: Column(
        children: <Widget>[
          Expanded(flex: 5, child: _buildQrView(context)),
          Expanded(
            flex: 1,
            child: Center(
              child: (result != null)
                  ? Text('Data: ${result!.code}')
                  : Text('Scan a code!'),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildQrView(BuildContext context) {
    // For this example we check how width or tall the device is and change the scanArea and overlay accordingly.
    var scanArea = (MediaQuery.of(context).size.width < 400 ||
            MediaQuery.of(context).size.height < 400)
        ? 150.0
        : 300.0;
    // To ensure the Scanner view is properly sized after rotation
    // we need to listen for Flutter SizeChanged notification and update controller
    return QRView(
      key: qrKey,
      onQRViewCreated: _onQRViewCreated,
      overlay: QrScannerOverlayShape(
          borderColor: Colors.red,
          borderRadius: 10,
          borderLength: 30,
          borderWidth: 10,
          cutOutSize: scanArea),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    setState(() {
      this.controller = controller;
    });
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData;
      });
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

Handling Permissions

Before your app can access the camera, you need to request permission from the user. The qr_code_scanner package handles this automatically on Android, but you might need to add specific permissions for iOS.

For Android: You usually don’t need to add any specific permissions in the AndroidManifest.xml file, as the package handles it for you.

For iOS: You need to add the NSCameraUsageDescription key to your Info.plist file. This key provides a description of why your app needs access to the camera. Open your ios/Runner/Info.plist file and add the following:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes</string>

Without this, your app might crash on iOS when trying to access the camera.

Implementing the QR Code Scanner

Now, let’s dive into the core implementation of the QR code scanner. We’ll use the QRView widget from the qr_code_scanner package to display the camera feed and detect QR codes.

Creating the QRView Widget

The QRView widget is the main component for displaying the camera feed and scanning QR codes. You need to provide a QRViewController to control the camera and listen for scanned data. Here’s how you can set it up:

final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
QRViewController? controller;

Widget _buildQrView(BuildContext context) {
  return QRView(
    key: qrKey,
    onQRViewCreated: _onQRViewCreated,
  );
}

The qrKey is a GlobalKey that allows you to access the QRView widget from other parts of your code. The onQRViewCreated callback is triggered when the QRView is created, and it provides you with a QRViewController instance.

Handling the QRViewController

The QRViewController is used to control the camera and listen for scanned data. In the _onQRViewCreated callback, you can initialize the controller and start listening for scanned data:

void _onQRViewCreated(QRViewController controller) {
  setState(() {
    this.controller = controller;
  });
  controller.scannedDataStream.listen((scanData) {
    setState(() {
      result = scanData;
    });
  });
}

Here, we’re setting the controller state variable and listening to the scannedDataStream . Whenever a QR code is scanned, the scanData is emitted to the stream, and we update the result state variable with the scanned data.

Displaying the Scanned Data

To display the scanned data, you can use a Text widget that shows the value of the result state variable:

Center(
  child: (result != null)
      ? Text('Data: ${result!.code}')
      : Text('Scan a code!'),
),

This will display the scanned data in the center of the screen. If no QR code has been scanned yet, it will display the text “Scan a code!”.

Enhancing the UI/UX

To enhance the UI/UX of your QR code scanner, you can add features like a scan area overlay, flash control, and auto-focus.

Adding a Scan Area Overlay

The qr_code_scanner package provides a QrScannerOverlayShape class that allows you to add a custom overlay to the camera view. This overlay can help guide the user to position the QR code within the scan area. Here’s how you can add an overlay:

QRView(
  key: qrKey,
  onQRViewCreated: _onQRViewCreated,
  overlay: QrScannerOverlayShape(
    borderColor: Colors.red,
    borderRadius: 10,
    borderLength: 30,
    borderWidth: 10,
    cutOutSize: scanArea,
  ),
)

This will add a red-bordered overlay with rounded corners to the camera view. The cutOutSize property determines the size of the scan area. You can adjust the borderColor , borderRadius , borderLength , and borderWidth properties to customize the appearance of the overlay.

Implementing Flash Control

To allow users to toggle the flash, you can add a button that calls the toggleFlash method on the QRViewController :

FloatingActionButton(
  onPressed: () async {
    await controller?.toggleFlash();
    setState(() {});
  },
  child: FutureBuilder<bool?>(
    future: controller?.getFlashStatus(),
    builder: (context, snapshot) {
      if (snapshot.data != null) {
        return Icon(snapshot.data! ? Icons.flash_on : Icons.flash_off);
      } else {
        return Icon(Icons.flash_off);
      }
    },
  ),
)

This will add a floating action button that toggles the flash when pressed. The getFlashStatus method returns a Future<bool?> that indicates whether the flash is currently on or off.

Auto-Focus

Auto-focus helps the camera focus on the QR code, ensuring a clear and quick scan. Most devices support auto-focus by default, but you can manually trigger it if needed. The qr_code_scanner package handles auto-focus automatically, so you usually don’t need to add any extra code for this.

Error Handling

It’s important to handle potential errors, such as when the camera fails to initialize or when the user denies camera permissions. The qr_code_scanner package provides error handling through the onQRViewCreated callback.

void _onQRViewCreated(QRViewController controller) {
  setState(() {
    this.controller = controller;
  });
  controller.scannedDataStream.listen((scanData) {
    setState(() {
      result = scanData;
    });
  });

  controller.onError = (error) {
    print('QR view error: $error');
  };
}

Here, we’re setting the onError callback to handle any errors that occur during the QR view creation or scanning process. You can display an error message to the user or take other appropriate actions based on the error.

Conclusion

And that’s it! You’ve successfully implemented a QR code scanner in your Flutter app. We covered everything from setting up the project and handling permissions to implementing the QR code scanner and enhancing the UI/UX. With this knowledge, you can now add QR code scanning functionality to your apps and provide a better experience to your users.

Remember to explore the qr_code_scanner package documentation for more advanced features and customization options. Happy coding, and have fun building awesome apps!