[flutter] 플러터(Flutter)에서 QR 코드 생성 및 스캔 방법은?

18 Dec 2023

flutter

플러터(Flutter) 앱에서 QR 코드를 생성하고 스캔하는 기능은 많은 애플리케이션에서 활용되고 있습니다. 이번 글에서는 플러터를 사용하여 QR 코드를 생성하고 스캔하는 방법에 대해 알아보겠습니다.

QR 코드 생성하기

플러터에서 QR 코드를 생성하는 방법은 qr_flutter 패키지를 사용하는 것이 일반적입니다. 먼저, pubspec.yaml 파일에 다음과 같이 qr_flutter 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  qr_flutter: ^3.2.0

그 다음, QR 코드를 생성하고 싶은 화면에서 다음과 같이 코드를 작성합니다.

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

class MyQrCodeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('내 QR 코드'),
      ),
      body: Center(
        child: QrImage(
          data: '내용이 들어갈 부분',
          version: QrVersions.auto,
          size: 200.0,
        ),
      ),
    );
  }
}

위 코드를 실행하면 해당 화면에서 지정한 내용을 가지고 있는 QR 코드가 생성됩니다.

QR 코드 스캔하기

플러터(Flutter)에서 QR 코드를 스캔하는 방법은 qr_code_scanner 패키지를 이용하면 간단하게 구현할 수 있습니다. 먼저, pubspec.yaml 파일에 다음과 같이 qr_code_scanner 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  qr_code_scanner: ^0.4.0

그 다음, QR 코드를 스캔할 화면에서 다음과 같이 코드를 작성합니다.

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

class QrScannerScreen extends StatefulWidget {
  @override
  _QrScannerScreenState createState() => _QrScannerScreenState();
}

class _QrScannerScreenState extends State<QrScannerScreen> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR 코드 스캔'),
      ),
      body: QRView(
        key: qrKey,
        onQRViewCreated: _onQRViewCreated,
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    controller.scannedDataStream.listen((scanData) {
      // 스캔한 내용 처리
    });
  }

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

위 코드를 실행하면 해당 화면에서 카메라를 활용하여 QR 코드를 스캔할 수 있습니다.

이상으로 플러터에서 QR 코드를 생성하고 스캔하는 방법에 대해 알아보았습니다. QR 코드 관련하여 더 자세한 내용은 해당 패키지의 문서를 참고하시기 바랍니다.

참고 문서: