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

플러터(Flutter) 프레임워크는 다양한 기능을 제공해주는데, 그 중 하나인 flutter_typeahead 패키지를 사용하여 검색 기능을 구현할 수 있습니다. 이번 글에서는 flutter_typeahead를 사용하여 호텔 정보를 검색하고, 검색 결과를 화면에 표시하는 방법에 대해 알아보겠습니다.

1. flutter_typeahead 패키지 설치하기

먼저, flutter_typeahead 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음 코드를 추가해주세요:

dependencies:
  flutter_typeahead: ^2.0.1

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행해주세요:

$ flutter pub get

2. 호텔 정보 가져오기

검색 결과로 표시할 호텔 정보를 어떤 방식으로 가져올지 결정해야 합니다. 예를 들어, API를 사용하거나 미리 정의된 호텔 데이터를 사용할 수 있습니다. 이 예제에서는 간단하게 미리 정의된 호텔 목록을 사용하겠습니다. 따라서, hotels라는 리스트를 생성하고 몇 개의 호텔 정보를 추가해주세요:

List<String> hotels = [
  "호텔 A",
  "호텔 B",
  "호텔 C",
  // ...
];

3. flutter_typeahead 위젯 사용하기

이제 flutter_typeahead 위젯을 사용하여 검색 기능을 구현할 차례입니다. 먼저, flutter_typeahead 패키지를 가져옵니다:

import 'package:flutter_typeahead/flutter_typeahead.dart';

그리고 flutter_typeahead 위젯을 화면에 추가합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

TypeAheadFormField(
  textFieldConfiguration: TextFieldConfiguration(
    decoration: InputDecoration(
      labelText: '호텔 검색',
    ),
  ),
  suggestionsCallback: (pattern) async {
    return hotels.where((hotel) => hotel.contains(pattern)).toList();
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  onSuggestionSelected: (suggestion) {
    // 선택된 호텔 정보를 처리하는 로직 작성
  },
)

위 코드에서 textFieldConfiguration은 검색어를 입력하는 텍스트필드의 구성을 정의합니다. suggestionsCallback은 입력한 검색어에 대해 호텔 목록에서 일치하는 항목들을 찾는 콜백 함수입니다. itemBuilder는 각 검색 결과 항목을 어떻게 표시할지 정의하는 콜백 함수입니다. onSuggestionSelected는 사용자가 검색 결과 항목을 선택했을 때 동작하는 콜백 함수입니다.

4. 결과 표시하기

마지막으로, 선택된 호텔 정보를 화면에 표시하는 로직을 작성해야 합니다. onSuggestionSelected 콜백 함수에서 선택된 호텔 정보를 처리하는 로직을 추가해주세요. 예를 들어, 다음과 같이 showDialog를 사용하여 선택된 호텔 정보를 대화 상자로 표시할 수 있습니다:

onSuggestionSelected: (suggestion) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('선택된 호텔'),
        content: Text('선택한 호텔: $suggestion'),
        actions: [
          FlatButton(
            child: Text('닫기'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      );
    },
  );
},

위 코드에서는 AlertDialog 위젯을 사용하여 대화상자를 표시하고, 선택한 호텔 이름을 내용으로 표시합니다.

이제 모든 작업이 완료되었습니다! flutter_typeahead를 사용하여 호텔 검색 기능을 구현하고, 검색 결과를 화면에 표시하는 방법을 알아보았습니다. 이를 응용하여 다양한 요구사항에 맞게 추가 기능을 구현할 수 있습니다.

참고 자료