Flutter QR Code Scan (플러터 QR코드 스캔)

플러터에서 QR코드를 스캔하는 코드 예제이다.

맥북에서 IOS 와 Android 모두 정상 동작함을 확인하고 기록한다.

 

pubspec.yaml 에 추가한 dependencies

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  dio: ^5.4.0
  retrofit: ^4.0.3
  flutter_riverpod: ^2.4.9
  json_annotation: ^4.8.1
  freezed_annotation: ^2.4.1
  flutter_naver_map: ^1.1.2
  permission_handler: ^11.2.0
  geolocator: ^10.1.0
  flutter_secure_storage: ^9.0.0
  qr_code_scanner: ^1.0.1
 
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  build_runner: ^2.4.8
  json_serializable: ^6.7.1
  freezed: ^2.4.6
  retrofit_generator: ^8.0.6

 

 

안드로이드 Manifest.xml 파일

QR코드 스캔을 위해서는 CAMERA 기능을 ON할 수 있어야 한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
    <uses-feature
        android:name="android.hardware.camera"
        android:required="false" />
 
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 
    <application
        android:label="nmap_test"
        android:name="${applicationName}"

 

iOS 파일

Info.plist

    <key>NSCameraUsageDescription</key>
    <string>This app needs camera access to scan QR codes</string>

 

Podfile

        ## dart: PermissionGroup.camera
        'PERMISSION_CAMERA=1',

 

보다 세부적인  사항은 https://link2me.tistory.com/2381 파일내의 ios 부분을 참조하면 된다.

 

 

네이버 MAP에서 QR코드 버튼을 누르면 QR코드 스캔이 활성화되고 QR코드를 찍으면 해당 정보를 읽어낸다.

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      title: 'Naver Map',
      appbarBgColor: Palette.primary,
      child: NaverMap(
        options: const NaverMapViewOptions(locationButtonEnable: true),
        onMapReady: onMapReady,
        onMapTapped: onMapTapped,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => const QRScanView(),
          ));
        },
        tooltip: 'scan',
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
 
  void onMapReady(NaverMapController controller) async {
    mapController = controller;
    print('네이버맵 로딩됨');
  }
 
  void onMapTapped(NPoint point, NLatLng latLng) {
    // 터치를 하면 해당 좌표를 반환한다.
    print("${latLng.latitude}、${latLng.longitude}");
  }
 

 

 

QRScanView 파일

import 'dart:io';
 
import 'package:flutter/material.dart';
import 'package:nmap_test/core/component/default_layout.dart';
import 'package:nmap_test/core/res/palette.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
 
class QRScanView extends StatefulWidget {
  const QRScanView({super.key});
 
  @override
  State<QRScanView> createState() => _QRScanViewState();
}
 
class _QRScanViewState extends State<QRScanView> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  Barcode? barcode;
  late QRViewController controller;
 
  @override
  void reassemble() {
    super.reassemble();
    if (Platform.isAndroid) {
      controller.pauseCamera();
    } else if (Platform.isIOS) {
      controller.resumeCamera();
    }
  }
 
  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
 
  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) async {
      setState(() {
        barcode = scanData;
      });
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      title: 'QR Code Scanner',
        child: Stack(
          alignment: Alignment.center,
          children: [
            _buildQRView(context),
            Positioned(bottom: 15, child: _buildResult()),
          ],
        ),
    );
  }
 
  Widget _buildQRView(BuildContext context) {
    return QRView(
      key: qrKey,
      onQRViewCreated: _onQRViewCreated,
    );
  }
 
  Widget _buildResult() {
    if (barcode != null) {
      controller?.pauseCamera();
      Future.microtask(() {
        // Navigator.push(
        //     context,
        //     MaterialPageRoute(builder: (context) => ),
        // );
        controller?.resumeCamera();
      });
 
      return Center(
        child: Text(
          'QR Code Result: ${barcode!.code}',
          style: TextStyle(fontSize: 20),
        ),
      );
    } else {
      return Container();
    }
  }
 
}
 

 

QR코드 스캔 결과가 나오면 해당 스캔 값을 가지고 서버에 전송하고 결과를 받아서 처리할 수도 있다.

그래서 _buildResult() 위젯 결과를 실행해보고 수정하여 사용하면 된다.