Scanning QR Code in Flutter on iOS and Android

Learn how to implement QR code scanning functionality in your flutter App

Photo by Brett Jordan on Unsplash

Flutter, Google’s open-source UI toolkit, has gained immense popularity among developers due to its ability to create visually appealing and high-performance cross-platform applications. In this article, we will delve into the process of implementing a QR code scanner in Flutter, allowing your app’s users to effortlessly scan QR codes using their device’s camera.

By the end of this tutorial, you will have a solid understanding of how to incorporate a QR code scanning feature into your applications.

We will use the mobile_scanner plugin available at the link below to implement this feature.

mobile_scanner | Flutter Package

Lets get started.

1. Setting up the project

You first need to create a starter Flutter project using the command below, replace qr_code_scanner with you app name

flutter create qr_code_scanner

It will create a basic counter app for you, go ahead and add mobile_scanner plugin to your project by running this command inside your project folder.

flutter pub add mobile_scanner

We now have to do some platform setup for this to work

- Android

Go to android>app>build.gradle file and update the minSdkVersion to 21.

defaultConfig {
    applicationId "com.example.qr_code_scanner"
    minSdkVersion 21
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

- iOS

Go to ios>Runner>info.plist file and add below two keys

<key>NSCameraUsageDescription</key>
<string>QR code scanner needs camera access to scan QR codes</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>QR code scanner needs photos access to get QR code from photo library</string>

2. Start Coding

Now we can start creating the QR code scnner, add below code

Add an import for mobile_scanner in you main.dart file

import 'package:mobile_scanner/mobile_scanner.dart';

// Add the scaneer
MobileScanner(
  onDetect: (capture) {
    final List<Barcode> barcodes = capture.barcodes;
    for (final barcode in barcodes) {
      print(data);
    }
  },
)

Full Code:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'QR Code Scanner',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'QR Code Scanner'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('QR Scanner')),
      body: SizedBox(
        height: 400,
        child: MobileScanner(onDetect: (capture) {
          final List<Barcode> barcodes = capture.barcodes;
          for (final barcode in barcodes) {
            print(barcode.rawValue ?? "No Data found in QR");
          }
        }),
      ),
    );
  }
}

That’s it, you have just added QR code scanning function to your app.

If you want more clearity, go ahead and check out my Github repository for this project

QRCodeScanner/lib/scanner.dart at master · rishi-singh26/QRCodeScanner

Screenshots from project on Github

With the knowledge gained from this article, you are well-equipped to implement a QR code scanner in your Flutter app. So, go ahead and start incorporating this feature in your project. Happy coding!

Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.