[flutter] 플러터(expandable)을 활용한 QR코드 생성 및 스캔 앱 개발 방법

04 Dec 2023

flutter

소개

이번 글에서는 Flutter를 사용하여 QR코드 생성 및 스캔 앱을 개발하는 방법을 알아보겠습니다. QR코드는 데이터를 빠르고 손쉽게 공유하고 전송할 수 있는 매우 편리한 방법입니다. Flutter의 expandable 패키지를 활용하여 QR코드 생성 기능과 스캔 기능을 구현해보도록 하겠습니다.

QR코드 생성

QR코드 생성을 위해 expandable 패키지를 사용하겠습니다. expandable 패키지는 Flutter에서 확장 가능한 위젯을 제공하여 UI를 보다 간편하게 다룰 수 있게 도와줍니다.

먼저 pubspec.yaml 파일에 expandable 패키지를 추가해줍니다.

dependencies:
  expandable: ^5.0.0

이제 QR코드를 생성하는 기능을 구현해보겠습니다. 아래의 코드를 참고하여 QR코드를 생성하는 위젯을 만들어주세요.

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

class QRCodeGenerator extends StatelessWidget {
  final String data;

  QRCodeGenerator({required this.data});

  @override
  Widget build(BuildContext context) {
    return ExpandablePanel(
      header: Text(
        "QR 코드",
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
      expanded: Column(
        children: [
          QrImage(
            data: data,
            version: QrVersions.auto,
            size: 200,
          ),
          SizedBox(height: 10),
          Text(
            "스캔할 데이터: $data",
            style: TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }
}

위 코드에서 QRCodeGenerator 위젯은 data라는 매개변수를 받아 해당 데이터를 기반으로 QR코드를 생성합니다. QrImage 위젯을 사용하여 QR코드를 생성하며, Text 위젯을 사용하여 생성된 QR코드에 대한 정보를 표시합니다.

QR코드 스캔

QR코드 스캔 기능을 구현하기 위해 qr_code_scanner 패키지를 사용하겠습니다. pubspec.yaml 파일에 qr_code_scanner 패키지를 추가해주세요.

dependencies:
  qr_code_scanner: ^0.5.0

이제 QR코드를 스캔하는 기능을 구현해보겠습니다. 아래의 코드를 참고하여 QR코드 스캔을 위한 위젯을 만들어주세요.

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

class QRCodeScanner extends StatefulWidget {
  @override
  _QRCodeScannerState createState() => _QRCodeScannerState();
}

class _QRCodeScannerState extends State<QRCodeScanner> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  late QRViewController controller;
  late String result;

  @override
  void initState() {
    super.initState();
    result = '';
  }

  @override
  void reassemble() {
    super.reassemble();
    controller.pauseCamera();
  }

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

  void onQRViewCreated(QRViewController controller) {
    setState(() {
      this.controller = controller;
    });
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData.code;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          flex: 5,
          child: QRView(
            key: qrKey,
            onQRViewCreated: onQRViewCreated,
          ),
        ),
        Expanded(
          flex: 1,
          child: Text(
            "스캔결과: $result",
            style: TextStyle(fontSize: 16),
          ),
        ),
      ],
    );
  }
}

위 코드에서 QRCodeScanner 위젯은 qr_code_scanner 패키지를 사용하여 QR코드를 스캔하는 기능을 구현합니다. QRView 위젯을 사용하여 카메라로부터 QR코드를 스캔하고, onQRViewCreated 콜백 함수를 통해 스캔된 데이터를 처리합니다.

결론

이제 위에서 구현한 QRCodeGenerator와 QRCodeScanner 위젯을 조합하여 QR코드 생성 및 스캔 앱을 개발할 수 있습니다. QR코드의 데이터를 생성하고 스캔하여 서로를 연결하는 다양한 기능을 구현해보세요. Flutter의 풍부한 패키지와 라이브러리를 활용하여 보다 다양한 기능을 추가할 수 있습니다.

참고 자료:

목차

소개

QR코드 생성

QR코드 스캔

결론