[flutter] 바코드 스캔 완료 시 알림 기능 추가하기

안녕하세요! Flutter를 사용하여 바코드 스캔 완료 시 알림 기능을 추가하는 방법에 대해 알려드리겠습니다.

필요한 패키지 설치하기

알림 기능을 구현하기 위해 다음과 같은 패키지들을 설치해야 합니다:

flutter_local_notifications: ^5.0.0+1
barcode_scan: ^3.0.2

위의 패키지들을 pubspec.yaml 파일의 dependencies 부분에 추가하고, 터미널에서 flutter packages get 명령어를 실행하여 패키지들을 다운로드하세요.

바코드 스캔 기능 추가하기

먼저, barcode_scan 패키지를 사용하여 바코드를 스캔하는 기능을 추가합니다. 아래의 코드를 참고하세요:

import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class BarcodeScanScreen extends StatefulWidget {
  @override
  _BarcodeScanScreenState createState() => _BarcodeScanScreenState();
}

class _BarcodeScanScreenState extends State<BarcodeScanScreen> {
  String _barcode = '';

  Future _scanBarcode() async {
    try {
      var result = await BarcodeScanner.scan();
      setState(() {
        _barcode = result.rawContent;
      });
      _showNotification();
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.cameraAccessDenied) {
        print('카메라 접근이 거부되었습니다!');
      } else {
        print('스캔 오류: $e');
      }
    } on FormatException{
      print('스캔을 취소하였습니다.');
    } catch (e) {
      print('스캔 오류: $e');
    }
  }

  Future _showNotification() async {
    // 알림을 생성하고 표시하는 코드 추가
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('바코드 스캔'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '바코드 결과:',
            ),
            Text(
              '$_barcode',
              style: TextStyle(fontSize: 20),
            ),
            RaisedButton(
              child: Text('스캔 시작'),
              onPressed: _scanBarcode,
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 BarcodeScanner.scan() 함수를 사용하여 바코드를 스캔하고, 스캔 결과를 _barcode 변수에 저장합니다. 그리고 _showNotification() 함수를 호출하여 알림을 표시합니다.

알림 기능 추가하기

이제 알림을 생성하고 표시하는 기능을 구현해보겠습니다. flutter_local_notifications 패키지를 사용하여 알림을 구현할 수 있습니다.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

// ...

class _BarcodeScanScreenState extends State<BarcodeScanScreen> {
  // ...

  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  void initState() {
    super.initState();
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    var initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    var initializationSettingsIOS = IOSInitializationSettings();
    var initializationSettings = InitializationSettings(
        initializationSettingsAndroid, initializationSettingsIOS);
    flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  Future _showNotification() async {
    var androidPlatformChannelSpecifics = AndroidNotificationDetails(
      'channelId',
      'channelName',
      'channelDescription',
      importance: Importance.max,
      priority: Priority.high,
    );
    var iOSPlatformChannelSpecifics = IOSNotificationDetails();
    var platformChannelSpecifics = NotificationDetails(
        androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      '바코드 스캔 완료',
      '$_barcode 를 스캔했습니다.',
      platformChannelSpecifics,
      payload: 'scanResult',
    );
  }

  // ...
}

위의 코드에서는 initState() 함수에서 FlutterLocalNotificationsPlugin을 초기화하고, _showNotification() 함수에서 알림을 생성하고 표시합니다. show() 함수의 매개변수들을 원하는 대로 수정하여 알림의 내용과 표시 방식을 변경할 수 있습니다.

결론

위의 코드를 사용하여 Flutter 앱에서 바코드 스캔 완료 시 알림을 표시할 수 있습니다. barcode_scan 패키지를 사용하여 바코드 스캔 기능을 추가하고, flutter_local_notifications 패키지를 사용하여 알림을 생성하고 표시합니다. 이를 활용하여 앱의 사용자에게 바코드 스캔 완료를 알리는 기능을 구현해보세요!

참고 자료