[flutter] 플러터 바코드 스캔 앱에 실시간 검색 기능 추가하기

플러터를 사용하여 바코드 스캔 앱을 개발하고 있는데, 사용자가 바코드를 스캔하면 해당 제품을 실시간으로 검색할 수 있는 기능을 추가하고 싶습니다. 이 기능을 구현하기 위해 어떤 단계들을 거쳐야 할까요?

단계 1: API 통신을 위한 패키지 추가하기

먼저, 실시간 검색 기능을 구현하기 위해 API와 통신해야 합니다. Dart 언어에서 HTTP 통신을 위한 패키지를 사용할 수 있습니다. 예를 들어 http 패키지를 사용하여 HTTP 요청을 보낼 수 있습니다. http 패키지를 프로젝트에 추가하기 위해 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  http: ^0.13.3

의존성을 추가한 후, flutter pub get 명령어를 실행하여 패키지를 설치합니다.

단계 2: 바코드 스캔 후 API 요청 보내기

바코드를 스캔한 후에는 해당 바코드를 서버에 전달하여 제품 정보를 받아올 수 있어야 합니다. 스캔된 바코드 정보를 서버에 전달하기 위해 http 패키지를 사용합니다. 다음은 바코드를 서버에 전달하는 예시 코드입니다:

import 'package:http/http.dart' as http;

Future<String> fetchProductInfo(String barcode) async {
  final response = await http.get(Uri.parse('https://api.example.com/product?barcode=$barcode'));
  
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to fetch product info');
  }
}

위의 코드에서는 fetchProductInfo 함수를 통해 서버에 HTTP GET 요청을 보냅니다. 응답 상태 코드가 200인 경우에는 제품 정보가 포함된 응답 본문을 반환하고, 그 이외의 경우에는 예외를 던집니다.

단계 3: 검색 결과를 화면에 표시하기

API 요청을 보내고 응답을 받은 후에는 검색 결과를 앱 화면에 표시해야 합니다. 이를 위해 Flutter의 상태 관리 패턴인 ‘프로바이더’를 사용할 수 있습니다.

프로바이더를 사용하여 검색 결과를 화면에 표시하는 예시 코드는 다음과 같습니다:

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

class ProductScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final productInfo = Provider.of<String>(context);
    
    return Scaffold(
      appBar: AppBar(
         title: Text('제품 정보'),
      ),
      body: Center(
        child: Text(productInfo),
      ),
    );
  }
}

위의 코드에서는 ProductScreen 위젯에서 Provider.of<String>(context)를 사용하여 fetchProductInfo 함수로부터 받은 제품 정보를 가져옵니다. 가져온 제품 정보를 Text 위젯의 자식으로 사용하여 화면에 표시합니다.

마치며

이렇게 플러터 바코드 스캔 앱에 실시간 검색 기능을 추가할 수 있습니다. 위의 단계를 따라가면서 필요한 기능을 구현해 보세요.