[Flutter] QR/Bar Code 인식 앱

플러터로 QR/Bar 코드 인식 앱을 만들어 보자.

 

앱 설명

플러터를 이용하여 QR/Bar 코드를 인식한다. 

비프음과 진동을 통해 인식 완료 되었다고 사용자에게 알려준다.

앱이 실행되는 동안 화면이 꺼지지 않게 설정한다.

 

데모

 

사용된 패키지

핵심 패키지(QR/Bar code 인식) : https://pub.dev/packages/flutter_qr_bar_scanner

인식시 소리 출력을 위한 패키지 : https://pub.dev/packages/flutter_beep

인식시 진동을 위한 패키지 : https://pub.dev/packages/flutter_vibrate

앱 실행 시 화면 꺼짐 방지 패키지 : https://pub.dev/packages/wakelock

 

소스

 

pubspec.yaml

name: flutter_qr_code_reader
description: Flutter QR Code Reader
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: ">=2.15.1 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  flutter_qr_bar_scanner: ^3.0.2
  flutter_beep: ^1.0.0
  flutter_vibrate: ^1.3.0
  wakelock: ^0.5.6
  cupertino_icons: ^1.0.2
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:
  uses-material-design: true

 

AndroidManifest.xml 권한설정

.
..
...
    <!-- 권한 추가 -->
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.permission.WAKE_LOCK"/>
...
..
.

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_qr_bar_scanner/qr_bar_scanner_camera.dart';
import 'package:flutter_beep/flutter_beep.dart';
import 'package:flutter_vibrate/flutter_vibrate.dart';
import 'package:wakelock/wakelock.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'QR/Bar코드인식 with 진동/소리',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'QR/Bar코드인식 with 진동/소리'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  String? _qrInfo = '스캔하세요';
  bool _canVibrate = true;
  bool _camState = false;

  @override
  void initState() {
    super.initState();
    _init();
  }

  /// 초기화 함수
  _init() async {
    bool canVibrate = await Vibrate.canVibrate;
    setState(() {
      // 화면 꺼짐 방지
      Wakelock.enable();

      // QR 코드 스캔 관련
      _camState = true;

      // 진동 관련
      _canVibrate = canVibrate;
      _canVibrate
          ? debugPrint('This device can vibrate')
          : debugPrint('This device cannot vibrate');
    });
  }

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

  /// QR/Bar Code 스캔 성공시 호출
  _qrCallback(String? code) {
    setState(() {
      // 동일한걸 계속 읽을 경우 한번만 소리/진동 실행..
      if (code != _qrInfo) {
        FlutterBeep.beep(); // 비프음
        if (_canVibrate) Vibrate.feedback(FeedbackType.heavy); // 진동
      }
      _camState = false;
      _qrInfo = code;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body:
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 500,
              width: 500,
              child: QRBarScannerCamera(
                // 에러 발생시..
                onError: (context, error) => Text(
                  error.toString(),
                  style: TextStyle(color: Colors.red),
                ),
                // QR 이 읽혔을 경우
                qrCodeCallback: (code) {
                  _qrCallback(code);
                },
              ),
            ),
            /// 사이즈 자동 조절을 위해 FittedBox 사용
            FittedBox(
              fit: BoxFit.fitWidth,
              child: Text(_qrInfo!, style: const TextStyle(fontWeight: FontWeight.bold),)
            )
          ],
        )
    );
  }
}