[flutter] 플러터 Flutter_typeahead에서 검색 결과의 가격 정보 표시하기

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 인기있는 프레임워크입니다. 이번에는 flutter_typeahead 패키지를 사용하여 검색 결과의 가격 정보를 표시하는 방법에 대해 알아보겠습니다.

flutter_typeahead 패키지란?

flutter_typeahead 패키지는 사용자가 입력한 텍스트에 기반하여 자동 완성 및 검색 제안을 제공하는 기능을 제공합니다. 이 패키지를 사용하면 효율적인 검색 기능을 구현할 수 있습니다.

검색 결과의 가격 정보 표시하기

  1. flutter_typeahead 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.
dependencies:
  flutter_typeahead: ^latest_version
  1. 가격 정보를 표시할 데이터 모델을 생성합니다. 예를 들어, Product라는 클래스를 만들어 가격 정보를 포함하도록 합니다.
class Product {
  final String name;
  final double price;

  Product({required this.name, required this.price});
}
  1. flutter_typeahead 위젯을 사용하여 검색 기능을 구현합니다. 아래 예제는 Product 객체의 리스트를 검색 대상으로 사용하고, 검색어와 일치하는 항목을 필터링하여 결과를 표시합니다.
TypeAheadFormField(
  textFieldConfiguration: TextFieldConfiguration(
    autofocus: true,
    decoration: InputDecoration(
      hintText: '검색어를 입력하세요',
    ),
  ),
  suggestionsCallback: (searchText) async {
    // 여기에서 검색 결과를 가져오는 비동기 작업을 수행합니다.
    final results = productList.where((product) =>
        product.name.toLowerCase().contains(searchText.toLowerCase()));
    return results.toList();
  },
  itemBuilder: (context, Product product) {
    return ListTile(
      title: Text(product.name),
      subtitle: Text('가격: ${product.price.toString()}'),
    );
  },
  onSuggestionSelected: (Product product) {
    // 선택된 항목에 대한 작업을 수행합니다.
  },
),

위의 코드에서 productList는 검색 대상인 Product 객체의 리스트입니다.

  1. 마지막으로, 위젯을 화면에 추가하면 검색 기능과 함께 가격 정보가 표시됩니다.
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('상품 검색'),
    ),
    body: Padding(
      padding: EdgeInsets.all(16.0),
      child: TypeAheadFormField(
        // 위의 코드를 추가합니다.
      ),
    ),
  );
}

이제 flutter_typeahead를 사용하여 검색 결과의 가격 정보를 표시할 수 있습니다. 플러터의 다양한 패키지와 기능을 활용하여 앱 개발을 더욱 쉽고 효율적으로 만들어 보세요.

References: