[flutter] RaisedButton을 사용해 바코드 스캔

07 Dec 2023

flutter

이번 글에서는 Flutter에서 RaisedButton을 사용하여 바코드 스캔을 어떻게 할 수 있는지 알아보겠습니다.

1. Flutter 바코드 스캐너 라이브러리 추가

우리는 바코드 스캐너 기능을 사용하기 위해 flutter_barcode_scanner라이브러리를 추가해야 합니다. pubspec.yaml 파일에 아래 코드를 추가해주세요.

dependencies:
  flutter_barcode_scanner: any

라이브러리를 추가한 후에는 flutter packages get 명령어를 실행하여 의존성을 다운로드 받아주세요.

2. 바코드 스캔 기능 구현

이제 바코드 스캔 기능을 구현해보겠습니다. 아래 코드를 main.dart 파일에 추가해주세요.

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

class BarcodeScanPage extends StatefulWidget {
  @override
  _BarcodeScanPageState createState() => _BarcodeScanPageState();
}

class _BarcodeScanPageState extends State<BarcodeScanPage> {
  String _scanResult = "";

  Future<void> _scanBarcode() async {
    String scanResult;
    try {
      scanResult = await FlutterBarcodeScanner.scanBarcode(
        "#ff6666", // 스캔 화면의 배경색 설정
        "Cancel", // 취소 버튼의 텍스트 설정
        true, // 바코드 결과 문자열 리턴 여부 설정
        ScanMode.DEFAULT, // 스캔 모드 설정
      );
    } catch (e) {
      scanResult = e.toString();
    }

    if (!mounted) return;

    setState(() {
      _scanResult = scanResult;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Barcode Scanner"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              onPressed: _scanBarcode,
              child: Text("Scan Barcode"),
            ),
            SizedBox(height: 20),
            Text("Scan Result: $_scanResult"),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: BarcodeScanPage(),
  ));
}

위 코드에서는 _scanBarcode 메소드를 통해 스캔 버튼이 클릭되었을 때 바코드 스캔 기능이 실행되도록 했습니다. 스캔 결과는 _scanResult 변수에 저장되며, 화면에 결과를 표시합니다.

3. 앱 실행

이제 차례로 앱을 실행해봅시다. 앱이 실행되면 “Scan Barcode” 버튼이 표시됩니다. 이 버튼을 클릭하면 카메라가 열리고 바코드를 스캔할 수 있습니다. 스캔이 완료되면 결과가 화면에 표시됩니다.

4. 결론

이번에는 Flutter에서 RaisedButton을 사용하여 바코드 스캔을 구현하는 방법을 알아보았습니다. 바코드 스캐너 라이브러리를 추가하여 사용하면 쉽게 바코드 스캔 기능을 구현할 수 있습니다.