[flutter] 플러터 Flutter_typeahead에서 검색 결과의 이미지 표시하기

플러터의 flutter_typeahead 패키지는 자동 완성 기능을 제공하는데, 이 기능을 사용할 때 검색 결과에 이미지를 표시하는 방법을 알아보겠습니다.

Step 1: 패키지 추가하기

먼저, flutter_typeahead 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 다음과 같은 코드를 추가합니다:

dependencies:
  flutter_typeahead: ^2.0.0

변경을 저장한 후, 패키지를 가져오기 위해 터미널에서 flutter pub get 명령을 실행합니다.

Step 2: 검색 결과에 이미지 추가하기

flutter_typeahead를 사용하여 검색 결과에 이미지를 표시하려면, TypeAheadFormField 위젯을 사용해야 합니다. 다음과 같이 코드를 작성합니다:

TypeAheadFormField(
  // 데이터 소스
  suggestionsCallback: (pattern) async {
    // 검색 결과 로직을 구현합니다.
    // 예: API를 호출하여 검색 결과를 가져옵니다.
    final result = await yourSearchFunction(pattern);
    return result;
  },
  // 검색 결과를 표시하는 방법을 정의합니다.
  itemBuilder: (context, suggestion) {
    // 각 검색 결과 항목에 대한 UI를 작성합니다.
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(suggestion.imageUrl),
      ),
      title: Text(suggestion.title),
    );
  },
  // 검색 결과를 선택했을 때의 동작을 정의합니다.
  onSuggestionSelected: (suggestion) {
    // 선택된 검색 결과 항목으로 동작을 수행합니다.
    // 예: 상세 페이지로 이동합니다.
    navigateToDetailPage(suggestion);
  },
  // 검색 입력 필드에 대한 설정을 정의합니다.
  textFieldConfiguration: TextFieldConfiguration(
    decoration: InputDecoration(
      hintText: '검색',
      border: OutlineInputBorder(),
    ),
  ),
)

위 코드에서 suggestionsCallback 함수는 검색 결과를 가져오는 API 로직을 구현해야 합니다. itemBuilder 함수는 각 검색 결과 항목을 표시하는 UI를 작성합니다. 여기서 suggestion.imageUrl은 검색 결과 항목의 이미지 URL을 가져온 다음, NetworkImage를 사용하여 이미지를 표시하도록 설정합니다.

onSuggestionSelected 함수는 검색 결과 항목을 선택했을 때의 동작을 정의합니다. 예를 들어, 선택된 검색 결과를 상세 페이지로 이동하도록 구현할 수 있습니다.

이제 TypeAheadFormField를 사용하여 검색 결과에 이미지를 표시할 수 있습니다. 플러터의 flutter_typeahead 패키지가 검색 기능을 보다 풍부하게 확장할 수 있도록 도와줍니다.

참고 자료