Flutter로 QR 코드 생성과 스캔: 나만의 앱 만들기 도전!

안녕하세요! 스테디빌더입니다. 😁
 
오늘은 Flutter로 QR 코드 생성과 스캔 앱을 만들어봤어요.
 
사실 처음에는 많이 쓰는 기능이라 “쉽겠지 뭐~” 하고 막연하게 생각했다가,
막상 시작하고 나니 “뭐부터 해야 하는거지? 어떤 패키지를 쓰는거지?” 하고 조금 막막했었지만,
하나씩 강의나 문서를 찾아보면서 해보니까 꽤 재밌고, 어렵지 않더라고요. 😊
 
이번 글에서는 제가 해본 과정을 초보자인 제 입장에서 정리해볼게요.
완벽하지는 않지만, 저처럼 처음 도전하는 분들에게 조금이라도 도움이 되었으면 좋겠습니다!

목차

1. 뭐가 필요할까?
2. QR 코드 생성: 텍스트를 QR 코드로 만들기
3. QR 코드 스캔: 카메라로 QR 코드 읽기
4. 초보자의 시행착오와 배운 점
5. 다음 단계: 확장 가능한 앱으로 발전시키기

1. 뭐가 필요할까?

이번 앱에서 구현할 기능:

1. 사용자가 입력한 텍스트를 QR 코드로 생성하기.
2. 모바일 카메라로 QR 코드를 스캔해서 데이터를 읽기.
3. QR 생성과 스캔을 하나의 앱으로 통합.

필요한 Flutter 패키지:

• qr_flutter: QR 코드를 생성하는 데 사용.
• mobile_scanner: QR 코드를 스캔하는 데 사용.

처음에는 관련 패키지를 써야 해서 좀 복잡하게 느껴졌어요.
그래도 차근차근 하다 보면 괜찮아질 거예요!

시작해보기:

먼저, 패키지를 추가했어요.
pubspec.yaml 파일에 다음을 추가하면 자동으로 패키지 업데이트가 이뤄집니다.
혹시 안된다면 flutter pub get을 실행하면 되겠죠? 굿 !

dependencies:
  qr_flutter: ^4.1.0
  mobile_scanner: ^6.0.2

(2025-01-08 기준 최신 패키지 적용)
 

⚠️ 주의 😱 주의 ☠️

기존 강의나 문서에는 qr_code_scanner 가 많이 보이는데,
생각보다 문제 해결 부분에서 상당히 고생을 하실 수 있어요.

PS C:\\src\\my_first_app> flutter build apk --release

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':qr_code_scanner'.
> Could not create an instance of type com.android.build.api.variant.impl.LibraryVariantBuilderImpl.
   > Namespace not specified. Specify a namespace in the module's build file. See <https://d.android.com/r/tools/upgrade-assistant/set-namespace> for information about setting the namespace.

     If you've specified the package attribute in the source AndroidManifest.xml, you can use the AGP Upgrade Assistant to migrate to the namespace value in the build file. Refer to 
<https://d.android.com/r/tools/upgrade-assistant/agp-upgrade-assistant> for general information about using the AGP Upgrade Assistant.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at <https://help.gradle.org>.

BUILD FAILED in 39s
Running Gradle task 'assembleRelease'...                           40.9s
Gradle task assembleRelease failed with exit code 1

저 역시 문제를 해결해 보려고 했는데 결국 실패하고 패키지를 변경했어요.

2. QR 코드 생성: 입력한 텍스트를 QR 코드로 만들기

시작해보기

아래는 제가 확인한 코드예요. 입력창에 텍스트를 적고 "QR 코드 생성" 버튼을 누르면, 바로 QR 코드가 화면에 나타나요.

QR 코드를 직접 만들어 본 건 처음이라 신기하기도 하고 어쨌든 기분이 좋았네요 ! ㅎㅎ!

완성된 코드라 실행만 해주면 됩니다.
한 번 해보세요 : )

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

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

class QRGeneratorApp extends StatelessWidget {
  const QRGeneratorApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: QRGeneratorScreen(),
    );
  }
}

class QRGeneratorScreen extends StatefulWidget {
  @override
  _QRGeneratorScreenState createState() => _QRGeneratorScreenState();
}

class _QRGeneratorScreenState extends State<QRGeneratorScreen> {
  final TextEditingController _controller = TextEditingController();
  String _qrData = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("QR 코드 생성"),
        actions: [
          IconButton(
            icon: Icon(Icons.qr_code_scanner),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => QRScannerScreen()),
              );
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: "QR 코드로 만들 텍스트를 입력하세요",
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _qrData = _controller.text;
                });
              },
              child: Text("QR 코드 생성"),
            ),
            SizedBox(height: 16),
            if (_qrData.isNotEmpty)
              QrImage(
                data: _qrData,
                version: QrVersions.auto,
                size: 200.0,
              ),
          ],
        ),
      ),
    );
  }
}

코드 설명

• 입력창에 텍스트를 적으면 QR 코드가 만들어져요.
• QrImageView 라는 위젯이 QR 코드를 화면에 표시해줍니다.
• 핸드폰 카메라로 찍어보면 정말로 연결됩니다 !

<QR 코드 생성 결과>

3. QR 코드 스캔: 카메라로 QR 코드 읽기

또 다른 기능으로 카메라를 사용해서 QR 코드를 읽는 기능을 추가해 봤습니다. 요새 핸드폰 카메라에서는 기본 기능으로 QR 인식이 가능하지만, 그래도 앱으로 만들어 보면 재미있겠죠 : )

이 스캔 앱에서는 QR 을 스캔하면 얼럿이 띄워지고, 스캔한 QR 코드의 텍스트가 보여집니다.

만약 링크라면 웹 브라우저로 연결되도록 하려고 했는데 생각보다 쉽지 않네요. 😥

URL 연결에 계속 실패해서 결국 포기했답니다.
다음에 시간이 더 있을 때 도전해 볼게요!

QR 코드 스캔 코드

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

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

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

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

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

  @override
  _QRScannerScreenState createState() => _QRScannerScreenState();
}

class _QRScannerScreenState extends State<QRScannerScreen> {
  bool _isDialogVisible = false; // 중복 얼럿 방지

  void _showScanResult(BuildContext context, String result) {
    if (_isDialogVisible) return; // 이미 얼럿이 표시 중이면 무시
    _isDialogVisible = true;

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("스캔 결과"),
          content: Text(result),
          actions: [
            TextButton(
              onPressed: () {
                _isDialogVisible = false;
                Navigator.of(context).pop();
              },
              child: const Text("닫기"),
            ),
          ],
        );
      },
    ).then((_) => _isDialogVisible = false); // 다이얼로그가 닫히면 초기화
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("QR 코드 스캐너")),
      body: MobileScanner(
        onDetect: (capture) {
          final List<Barcode> barcodes = capture.barcodes;
          final Barcode? barcode = barcodes.isNotEmpty ? barcodes.first : null;

          if (barcode != null && barcode.rawValue != null) {
            _showScanResult(context, barcode.rawValue!);
          }
        },
      ),
    );
  }
}

코드 설명

• MobileScanner 위젯을 사용해서 카메라를 실행하고 QR 코드를 실시간으로 감지합니다.
• 스캔 결과 표시: QR 코드에서 읽은 데이터를 AlertDialog를 통해 화면에 표시합니다.
• 스캔해 본 결과, 입력한 텍스트가 제대로 읽히는 걸 보고 정말 기분이 묘하게 좋았어요 ! (ㅎ)

 

 

4. 초보자의 시행착오와 배운 점

카메라 권한 문제

처음에 카메라가 작동하지 않아서 당황했어요.
알고 보니 Android에서 카메라 권한을 추가해야 하더군요.

AndroidManifest.xml 파일에 아래 내용을 추가했어요.
이 파일 경로는 android > app > src > main 에 위치해 있습니다.

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

저는 <manifest xmlns:…. > 아래쪽 / <application … 위쪽에 위치했습니다

 

버튼 동작 안됨

버튼을 눌러도 QR 코드가 생성되지 않는 문제가 있었는데,
알고 보니 setState를 빼먹었었습니다… 후우…
Flutter에서는 화면을 업데이트할 때 setState를 꼭 써야 해요.

 
 

얼럿 반복 호출

카메라로 QR 코드를 계속 비추고 있으니
AlertDialog 가 계속 띄워지는 문제가 있었어요. 😱
 
_isDialogVisible 로 true / false 로 구분값을 정하고,
if (_isDialogVisible) return; 조건으로 해결했습니다.
 

 

 

5. 다음 단계: 앱 확장 아이디어

• QR 코드 스타일 변경
  • QR 코드의 색상, 로고 추가 같은 옵션을 추가해볼 수 있어요.
• 스캔 결과 저장
  • 스캔한 데이터를 저장해서 나중에 다시 볼 수 있게 만들면 더 편리할 것 같아요.
• 다양한 데이터 형식 지원
  • URL, 이메일, 연락처 같은 형식도 지원하도록 확장 가능.
  • 여러분은 꼭 URL 연결에 성공하셨으면 좋겠네요.

 

 

마무리

QR 코드 앱을 만들어보면서 Flutter의 강력함을 다시 한 번 느꼈어요.
Flutter 기본 제공되는 패키지에 QR 생성은 물론 스캔까지 있다는 것에 또한번 놀랐네요.
저처럼 Flutter를 처음 배우는 분들도 한 번 도전해보세요! 모르는 부분은 함께 해결해 나가 봅시다 ! 😊
궁금한 점이나 새로운 아이디어가 있다면 댓글로 공유해주세요. 다음에는 더 재미있는 프로젝트로 찾아뵐게요!