[flutter] 바코드 스캔 결과를 화면에 표시하는 방법

바코드 스캔은 많은 애플리케이션에서 중요한 기능 중 하나입니다. Flutter를 사용하여 바코드 스캔 결과를 화면에 표시하는 방법에 대해 알아보겠습니다.

필요한 패키지 가져오기

먼저, 바코드 스캔을 위해 barcode_scan 패키지를 사용할 것입니다. 이 패키지를 설치하려면 pubspec.yaml 파일에 다음을 추가하고, 패키지를 가져와야 합니다.

dependencies:
  barcode_scan: ^3.0.0

바코드 스캔 구현하기

다음으로, 바코드 스캔 기능을 구현해야 합니다. 아래의 예제 코드는 barcode_scan 패키지를 사용하여 바코드를 스캔하고 결과를 반환하는 간단한 함수입니다.

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

class BarcodeScannerScreen extends StatefulWidget {
  @override
  _BarcodeScannerScreenState createState() => _BarcodeScannerScreenState();
}

class _BarcodeScannerScreenState extends State<BarcodeScannerScreen> {
  String barcodeResult = "";

  Future<void> scanBarcode() async {
    try {
      final ScanResult result = await BarcodeScanner.scan();
      setState(() {
        barcodeResult = result.rawContent;
      });
    } catch (e) {
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Scan Result:',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            Text(
              barcodeResult,
              style: TextStyle(fontSize: 20),
            ),
            RaisedButton(
              onPressed: scanBarcode,
              child: Text('Scan Barcode'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 BarcodeScannerScreen 클래스는 StatefulWidget을 상속 받고, _BarcodeScannerScreenState 클래스는 State를 관리하는 역할을 합니다. barcodeResult 변수는 스캔 결과를 저장하고 화면에 표시합니다.

scanBarcode() 함수는 BarcodeScanner.scan()을 호출하여 바코드 스캔을 시작하고, 결과를 받아와 barcodeResult를 업데이트합니다. 스캔에 실패하는 경우 catch 문에서 오류를 처리합니다.

그리고 build() 메서드에서는 화면을 렌더링하고, 바코드 스캔 버튼을 누르면 scanBarcode() 함수를 호출하도록 구현되어 있습니다.

스캔 결과 화면에 표시하기

위에서 구현한 바코드 스캔 화면을 다른 화면과 연결하여 사용할 수 있습니다. 예를 들어, 메인 화면에서 바코드 스캔 버튼을 누르면 스캔 결과를 보여주는 화면으로 이동하는 등의 방식으로 구현할 수 있습니다.

import 'package:flutter/material.dart';

import 'barcode_scanner_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Barcode Scanner Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => BarcodeScannerScreen()),
            );
          },
          child: Text('Scan Barcode'),
        ),
      ),
    );
  }
}

위의 코드에서 HomePage 클래스는 BarcodeScannerScreen으로 이동하는 버튼을 가진 메인 화면을 구현합니다. onPressed 핸들러에서 Navigator.push()를 호출하여 BarcodeScannerScreen 화면으로 이동합니다.

이렇게 구현된 앱을 실행하면 스캔 버튼을 누르면 바코드 스캔 화면으로 이동하고, 스캔한 결과를 화면에 표시할 수 있습니다.

결론

Flutter를 사용하면 바코드 스캔 기능을 쉽게 구현할 수 있습니다. barcode_scan 패키지를 사용하여 바코드를 스캔하고, 해당 결과를 화면에 표시하는 간단한 예제 코드를 살펴보았습니다.

더 자세한 내용은 barcode_scan 패키지의 문서를 참고하시기 바랍니다.