How to create QR App using flutter with source code

Below is a simple, beginner-friendly guide to create a QR Code app in Flutter, including full source code.
This app will generate QR codes and scan QR codes 📱

1️⃣ Prerequisites

Make sure you have:

• Flutter SDK installed
• Android Studio / VS Code
• Basic Flutter knowledge

Check Flutter:

flutter doctor

2️⃣ Create a New Flutter Project

flutter create qr_app
cd qr_app

3️⃣ Add Required Packages

Open pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  qr_flutter: ^4.1.0
  mobile_scanner: ^3.5.5

Then run:

flutter pub get

4️⃣ QR Code Generator Screen

lib/qr_generator.dart

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

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

  @override
  State<QRGenerator> createState() => _QRGeneratorState();
}

class _QRGeneratorState extends State<QRGenerator> {
  String qrData = "Hello World";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("QR Generator")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Enter text",
              ),
              onChanged: (value) {
                setState(() {
                  qrData = value;
                });
              },
            ),
            const SizedBox(height: 20),
            QrImageView(
              data: qrData,
              size: 200,
            ),
          ],
        ),
      ),
    );
  }
}

5️⃣ QR Code Scanner Screen

lib/qr_scanner.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("QR Scanner")),
      body: MobileScanner(
        onDetect: (barcode, args) {
          final String? code = barcode.rawValue;
          if (code != null) {
            showDialog(
              context: context,
              builder: (_) => AlertDialog(
                title: const Text("Scanned Result"),
                content: Text(code),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text("OK"),
                  )
                ],
              ),
            );
          }
        },
      ),
    );
  }
}

6️⃣ Main App with Navigation

lib/main.dart

import 'package:flutter/material.dart';
import 'qr_generator.dart';
import 'qr_scanner.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("QR App")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text("Generate QR Code"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const QRGenerator()),
                );
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text("Scan QR Code"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => const QRScanner()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

7️⃣ Android Permissions (Important)

Open android/app/src/main/AndroidManifest.xml:

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

8️⃣ Run the App

flutter run

🎯 Features Implemented

✔ QR Code Generator
✔ QR Code Scanner
✔ Clean UI
✔ Beginner Friendly