[flutter] 사용자 정의 디자인을 적용한 플러터 바코드 스캔 앱 만들기

Flutter는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 사용자 정의 디자인을 적용하고 다양한 기능을 구현하는 것이 가능합니다. 이번 블로그 포스트에서는 이러한 Flutter의 장점을 활용하여 바코드 스캔 앱을 만드는 방법을 알아보겠습니다.

1. 바코드 스캔 기능 구현하기

먼저, 바코드 스캔 기능을 구현하기 위해 flutter_barcode_scanner 패키지를 사용합니다. 이 패키지는 간단하게 바코드를 스캔할 수 있는 기능을 제공해줍니다.

먼저, pubspec.yaml 파일에 다음과 같이 flutter_barcode_scanner 패키지를 추가합니다.

dependencies:
  flutter_barcode_scanner: ^2.0.0

그리고 barcode_scanner.dart 파일을 생성하여 다음과 같이 바코드 스캔 함수를 정의합니다.

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

class BarcodeScanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Scan Barcode'),
          onPressed: () {
            _scanBarcode(context);
          },
        ),
      ),
    );
  }

  Future<void> _scanBarcode(BuildContext context) async {
    final String barcode = await FlutterBarcodeScanner.scanBarcode(
      '#FF0000',
      'Cancel',
      false,
      ScanMode.DEFAULT,
    );

    // 스캔한 바코드에 대한 로직 추가
  }
}

위 코드에서는 RaisedButton 위젯을 터치하면 _scanBarcode 함수가 실행되고, FlutterBarcodeScanner 패키지를 통해 바코드를 스캔합니다. 스캔 결과는 barcode 변수에 저장되며, 이후에는 해당 바코드에 대한 로직을 추가할 수 있습니다.

2. 사용자 정의 디자인 적용하기

바코드 스캔 앱에 사용자 정의 디자인을 적용하기 위해 다음과 같이 theme.dart 파일을 생성합니다.

import 'package:flutter/material.dart';

// 기본 테마 데이터 정의
final ThemeData appTheme = ThemeData(
  primarySwatch: Colors.blue,
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.blue,
    textTheme: ButtonTextTheme.primary,
  ),
);

그리고 main.dart 파일에서 다음과 같이 theme.dart를 import하고 BarcodeScanner 위젯을 MaterialApp 내에서 사용합니다.

import 'package:flutter/material.dart';
import 'theme.dart';
import 'barcode_scanner.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Barcode Scanner',
      theme: appTheme, // 사용자 정의 테마 적용
      home: BarcodeScanner(),
    );
  }
}

위 코드에서는 appThemeMaterialApptheme 속성에 적용하여 앱 전체에 사용자 정의 테마를 적용합니다.

마무리

이제 위의 코드를 실행시키면 바코드 스캔 앱이 실행되고, 사용자 정의 디자인이 적용된 앱을 확인할 수 있습니다. Flutter의 강력한 기능과 사용자 정의 디자인을 활용하여 다양한 앱을 만들 수 있으니, 창의적인 아이디어를 펼쳐보세요.

참고 자료