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

Flatter는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 단일 코드베이스로 iOS와 Android 앱을 개발할 수 있습니다. Flutter_typeahead는 Flutter에서 제공하는 텍스트 입력 위젯입니다.

이번 블로그에서는 Flutter_typeahead를 사용하여 검색 결과의 여행 정보를 표시하는 방법에 대해 알아보겠습니다.

1단계: 패키지 가져오기

flutter_typeahead 패키지를 사용하기 위해 먼저 pubspec.yaml 파일에 의존성을 추가해야 합니다. 아래와 같이 dependencies 섹션에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^1.11.0

의존성 추가 후, 패키지를 가져오기 위해 터미널에서 flutter pub get 명령어를 실행합니다.

2단계: 검색 위젯 생성

flutter_typeahead 패키지를 사용하여 검색 위젯을 생성합니다. 아래는 간단한 검색 위젯의 예시입니다.

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

class SearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TypeAheadField(
      suggestionsCallback: (pattern) async {
        // 여행 정보를 가져오는 비동기 함수 호출
        List<TravelInfo> result = await getTravelInfo(pattern);
        return result;
      },
      itemBuilder: (context, suggestion) {
        // 각 검색 결과 항목을 표시하는 위젯 생성
        return ListTile(
          title: Text(suggestion.title),
          subtitle: Text(suggestion.location),
        );
      },
      onSuggestionSelected: (suggestion) {
        // 검색 결과 항목 선택 시 동작하는 함수
        // 여기서는 해당 여행 정보 상세 페이지로 이동하도록 설정 가능
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => TravelDetailPage(travelInfo: suggestion),
          ),
        );
      },
    );
  }
}

3단계: 여행 정보 표시하기

검색 위젯에서 사용할 여행 정보를 가져오려면 suggestionsCallback 함수를 구현해야 합니다. 비동기 함수 getTravelInfo에서 데이터를 가져오고, 해당 결과를 반환해야 합니다. 결과는 List<TravelInfo> 형태여야 합니다.

여행 정보를 표시하기 위해 itemBuilder 함수에서 각 검색 결과 항목을 위젯으로 생성합니다. 위젯은 ListTile과 같이 적절한 형태로 구성할 수 있습니다.

그리고 onSuggestionSelected 함수에서 검색 결과 항목을 선택했을 때의 동작을 정의할 수 있습니다. 예를 들어, 선택한 여행 정보의 상세 페이지로 이동하도록 설정할 수 있습니다.

마무리

이렇게 flutter_typeahead 패키지를 사용하여 검색 결과의 여행 정보를 표시하는 방법을 알아보았습니다. 플러터의 다양한 패키지와 기능을 활용하면 더 많은 유용한 앱을 개발할 수 있습니다.

위의 예시 코드는 실제로 동작하는 코드가 아니므로, 필요에 따라 수정하여 사용해야 합니다. 자세한 내용은 flutter_typeahead 패키지 문서를 참고하시기 바랍니다.