How to create QR Scanner App Using Flutter

Below is a complete step-by-step guide to create a QR Code Scanner App using Flutter, suitable for beginners and also good enough for a production-ready demo 🚀
(I’ll keep it simple and clean, just like your previous Flutter learning topics.)

---

🔹 Step 1: Create a New Flutter Project

flutter create qr_scanner_app
cd qr_scanner_app
flutter run

---

🔹 Step 2: Add Required Dependencies

Open pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  mobile_scanner: ^5.0.0

Then run:

flutter pub get

👉 mobile_scanner is fast, stable, and supports Android & iOS.

---

🔹 Step 3: Android Permissions

📌 AndroidManifest.xml

android/app/src/main/AndroidManifest.xml

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

Inside <application> tag:

android:hardwareAccelerated="true"

---

🔹 Step 4: iOS Permissions

📌 Info.plist

ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Camera permission is required to scan QR codes</string>

---

🔹 Step 5: Main App Code

📌 main.dart

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(
      debugShowCheckedModeBanner: false,
      title: 'QR Scanner',
      home: const QRScannerPage(),
    );
  }
}

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

  @override
  State<QRScannerPage> createState() => _QRScannerPageState();
}

class _QRScannerPageState extends State<QRScannerPage> {
  String scannedResult = "Scan a QR Code";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("QR Scanner App"),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            flex: 4,
            child: MobileScanner(
              onDetect: (barcode) {
                final String? code = barcode.barcodes.first.rawValue;
                if (code != null) {
                  setState(() {
                    scannedResult = code;
                  });
                }
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              width: double.infinity,
              color: Colors.black,
              alignment: Alignment.center,
              child: Text(
                scannedResult,
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

🔹 Step 6: Run the App

flutter run

📱 Point your camera at any QR code → result appears instantly.

---

🔹 Features You Can Add (Next Level 🚀)

✔ Flashlight ON/OFF
✔ Scan only once (prevent duplicate scans)
✔ Open scanned URL in browser
✔ Save scanned history
✔ Add Clean Architecture + BLoC (like your previous projects)

---

🔹 Flashlight Button Example (Optional)

MobileScannerController controller = MobileScannerController();

IconButton(
  icon: const Icon(Icons.flash_on),
  onPressed: () {
    controller.toggleTorch();
  },
),

---

🔹 Common Errors & Fixes

❌ Camera not opening
✔ Check permissions in AndroidManifest & Info.plist

❌ App crashes on scan
✔ Use null check for barcode value

---

🔹 Final Output

✔ Fast QR scanning
✔ Android & iOS supported
✔ Minimal & clean UI
✔ Production ready base