[flutter] 플러터에서의 바코드 스캐너 처리 방법

30 Nov 2023

flutter

플러터는 모바일 앱 개발에 널리 사용되는 프레임워크 중 하나로, 바코드 스캐너 기능을 효과적으로 구현할 수 있습니다. 이번 포스트에서는 플러터에서 바코드 스캐너를 처리하는 방법에 대해 알아보겠습니다.

1. flutter_barcode_scanner 패키지 설치하기

먼저, 플러터에서 바코드 스캐너 기능을 사용하기 위해서는 flutter_barcode_scanner 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래의 코드를 추가하여 패키지를 설치합니다:

dependencies:
  flutter_barcode_scanner: ^3.0.1

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다:

flutter pub get

2. 바코드 스캐너 화면 만들기

바코드 스캐너를 사용하기 위해 먼저 스캐너 화면을 구현해야 합니다. barcode_screen.dart 파일을 생성하고, 다음 코드를 추가합니다:

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

class BarcodeScreen extends StatefulWidget {
  @override
  _BarcodeScreenState createState() => _BarcodeScreenState();
}

class _BarcodeScreenState extends State<BarcodeScreen> {
  String _barcodeResult = '';

  Future<void> _scanBarcode() async {
    String barcodeResult = await FlutterBarcodeScanner.scanBarcode(
      '#ff6666', // 스캔 화면의 바코드 색상 설정
      'Cancel', // 스캔 취소 버튼 텍스트 설정
      true, // 스캔 결과 소리 설정
      ScanMode.DEFAULT, // 스캔 모드 설정
    );

    setState(() {
      _barcodeResult = barcodeResult;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '스캔 결과:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            Text(
              _barcodeResult,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _scanBarcode,
              child: Text('스캔하기'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 바코드 스캐너 화면을 구성하고, _scanBarcode 메서드를 통해 실제로 바코드를 스캔하는 기능을 구현합니다. 스캔 결과를 _barcodeResult 변수에 저장하고, 화면에 출력합니다.

3. 바코드 스캐너 화면 호출하기

이제 스캐너 화면을 호출하는 방법에 대해 알아보겠습니다. 예를 들어, 메인 화면에서 바코드 스캐너 화면으로 이동하기 위해서는 다음과 같이 코드를 작성합니다:

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

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

class BarcodeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Barcode Scanner',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (context) => HomeScreen(),
        '/scanner': (context) => BarcodeScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/scanner');
          },
          child: Text('바코드 스캐너'),
        ),
      ),
    );
  }
}

위의 코드에서는 BarcodeApp을 만들고, / 경로에서는 HomeScreen을 보여주고, /scanner 경로에서는 BarcodeScreen을 보여줍니다. HomeScreen에서는 바코드 스캐너 화면으로 이동하기 위한 버튼을 생성합니다. 버튼을 클릭하면 Navigator.pushNamed(context, '/scanner') 코드를 통해 바코드 스캐너 화면으로 이동할 수 있습니다.

결론

위의 방법을 사용하면 플러터에서 쉽게 바코드 스캐너를 처리할 수 있습니다. flutter_barcode_scanner 패키지를 사용하여 스캐너 기능을 구현하고, Navigator를 사용하여 원하는 화면으로 이동할 수 있습니다. 앱 개발에서 바코드 스캐너는 매우 유용한 기능이므로, 플러터를 사용하여 앱을 개발할 때 바코드 스캐너를 적극적으로 활용해보시기 바랍니다.

1. flutter_barcode_scanner 패키지 설치하기

2. 바코드 스캐너 화면 만들기

3. 바코드 스캐너 화면 호출하기

결론

참고 자료