Flutter의 바코드 스캔 사용법

Flutter 애플리케이션에서 바코드 스캔 기능을 구현하면 사용자가 제품 정보를 빠르고 쉽게 확인할 수 있습니다. 바코드 스캔은 다양한 산업에서 널리 사용되며, Flutter에서는 이를 간편하게 구현할 수 있습니다. 이번 글에서는 Flutter에서 바코드 스캔 기능을 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 바코드 스캔 패키지 설치

Flutter 애플리케이션에서 바코드를 스캔하기 위해 barcode_scan2 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  barcode_scan2: ^4.1.6

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 카메라 권한을 사용하기 위해 android/app/src/main/AndroidManifest.xml 파일을 수정해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_project_name">

    <application>
        ...
    </application>

    <uses-permission android:name="android.permission.CAMERA"/>
</manifest>

 

위 코드는 카메라 사용 권한을 추가합니다.

3. iOS 설정

iOS 프로젝트에서 카메라 권한을 사용하기 위해 ios/Runner/Info.plist 파일을 수정해야 합니다.

<key>NSCameraUsageDescription</key>
<string>We need your camera to scan barcodes.</string>

 

위 코드는 카메라 사용 권한을 추가합니다.

4. 바코드 스캔 구현

이제 Flutter 애플리케이션에서 바코드를 스캔하는 기능을 구현해보겠습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BarcodeScanExample(),
    );
  }
}

class BarcodeScanExample extends StatefulWidget {
  @override
  _BarcodeScanExampleState createState() => _BarcodeScanExampleState();
}

class _BarcodeScanExampleState extends State<BarcodeScanExample> {
  String barcode = "";

  Future<void> scanBarcode() async {
    try {
      var result = await BarcodeScanner.scan();
      setState(() {
        barcode = result.rawContent;
      });
    } catch (e) {
      setState(() {
        barcode = "Failed to get barcode: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: scanBarcode,
              child: Text('Scan Barcode'),
            ),
            SizedBox(height: 20),
            Text(
              barcode.isEmpty ? 'Scan a code' : 'Scanned code: $barcode',
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 바코드를 스캔하여 결과를 화면에 표시하는 예제입니다. BarcodeScanner.scan 메서드를 사용하여 바코드를 스캔하고, 결과를 barcode 변수에 저장하여 화면에 표시합니다.

 

 

반응형

 

5. 바코드 스캔 기능 테스트

위 예제를 실행하여 바코드를 스캔해보세요. 카메라가 활성화되고, 바코드를 인식하면 스캔 결과가 화면에 표시됩니다.

6. 바코드 스캔 결과 처리

스캔한 바코드의 결과를 처리하는 방법을 추가해보겠습니다. 예를 들어, 스캔 결과를 특정 URL로 열거나 특정 동작을 수행할 수 있습니다.

 

import 'package:flutter/material.dart';
import 'package:barcode_scan2/barcode_scan2.dart';
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BarcodeScanExample(),
    );
  }
}

class BarcodeScanExample extends StatefulWidget {
  @override
  _BarcodeScanExampleState createState() => _BarcodeScanExampleState();
}

class _BarcodeScanExampleState extends State<BarcodeScanExample> {
  String barcode = "";

  Future<void> scanBarcode() async {
    try {
      var result = await BarcodeScanner.scan();
      setState(() {
        barcode = result.rawContent;
        if (barcode.isNotEmpty && barcode.startsWith('http')) {
          _launchURL(barcode);
        }
      });
    } catch (e) {
      setState(() {
        barcode = "Failed to get barcode: $e";
      });
    }
  }

  Future<void> _launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: scanBarcode,
              child: Text('Scan Barcode'),
            ),
            SizedBox(height: 20),
            Text(
              barcode.isEmpty ? 'Scan a code' : 'Scanned code: $barcode',
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 스캔한 바코드 결과가 URL인 경우 해당 URL을 브라우저에서 여는 예제입니다. url_launcher 패키지를 사용하여 URL을 엽니다.

pubspec.yaml 파일에 url_launcher 패키지를 추가합니다.

 

dependencies:
  url_launcher: ^6.0.20

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

결론

Flutter에서 바코드를 스캔하는 기능을 구현하면 사용자가 제품 정보를 빠르고 쉽게 확인할 수 있습니다. barcode_scan2 패키지를 사용하여 바코드를 스캔하고, 스캔 결과를 처리하는 방법을 통해 바코드 스캔 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 바코드 스캔 기능을 효율적으로 사용해보세요. 바코드 스캔을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.