[flutter] 플러터 Flutter_typeahead에서 추천 검색어 목록의 아이콘 추가하기

플러터의 Flutter_typeahead 패키지는 자동 완성 및 추천 검색어 기능을 제공하는 강력한 도구입니다. 그러나 기본적으로는 텍스트만을 사용하여 검색어를 표시합니다. 이번 블로그 포스트에서는 플러터 Flutter_typeahead에서 추천 검색어 목록의 아이콘을 추가하는 방법에 대해 알아보겠습니다.

1. flutter_typeahead 패키지 추가하기

먼저, 프로젝트에 flutter_typeahead 패키지를 추가해야 합니다. 아래의 명령을 실행하여 패키지를 추가할 수 있습니다.

dependencies:
  flutter_typeahead: ^x.x.x

버전은 최신 버전을 사용하는 것을 권장합니다. 패키지 종속성을 업데이트하려면 flutter pub get 명령을 실행하세요.

2. 검색어 목록 아이콘 추가

검색어 목록에 아이콘을 추가하기 위해 FlutterTypeAhead 위젯의 suggestionsCallback 매개변수를 사용합니다. 이 매개변수를 통해 검색어 목록을 반환하는 함수를 정의할 수 있습니다. 이 함수에서는 아이콘과 함께 검색어를 표시하는 위젯을 반환해야 합니다.

아래는 예시 코드입니다.

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

class MySearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TypeAheadField(
      suggestionsCallback: (pattern) async {
        // 검색어 목록 조회 API 호출
        List<String> suggestions = await getSearchSuggestions(pattern);
        return suggestions;
      },
      itemBuilder: (context, suggestion) {
        // 검색어와 아이콘을 함께 표시하는 위젯 반환
        return ListTile(
          leading: Icon(Icons.search),
          title: Text(suggestion),
        );
      },
      onSuggestionSelected: (suggestion) {
        // 검색어가 선택되었을 때 동작 정의
        // 필요한 로직을 추가하세요
      },
    );
  }

  // 검색어 목록 조회 API 호출하는 함수
  Future<List<String>> getSearchSuggestions(String pattern) async {
    // 필요한 API 호출 로직 작성
    // 검색어 목록을 리스트 형태로 반환하세요
  }
}

위 예시 코드에서는 itemBuilder 콜백에서 ListTile 위젯을 반환하고 있습니다. 이 위젯 안에 Icon 위젯을 추가하여 검색어 옆에 아이콘을 표시하도록 했습니다. 여기서는 검색 아이콘을 사용했지만, 필요에 따라 다른 아이콘을 사용할 수도 있습니다.

검색어 목록 아이콘을 클릭했을 경우에는 onSuggestionSelected 콜백이 실행됩니다. 이 콜백에서는 검색어가 선택되었을 때의 동작을 정의할 수 있습니다.

3. 활용 및 커스터마이징

위 예시 코드를 사용하면 플러터 어플리케이션에서 추천 검색어와 함께 아이콘을 표시할 수 있습니다. 필요에 따라 아이콘을 변경하거나 추가적인 커스터마이징 작업을 수행할 수도 있습니다.

이 외에도 FlutterTypeAhead 위젯은 다양한 속성을 제공하므로 필요에 따라 설정해 사용할 수 있습니다. 자세한 내용은 flutter_typeahead 패키지의 문서를 참고하세요.

4. 결론

이번 포스트에서는 플러터의 flutter_typeahead 패키지를 사용하여 추천 검색어 목록에 아이콘을 추가하는 방법을 알아보았습니다. 이를 통해 플러터 앱에서 보다 사용자 친화적인 검색기능을 구현할 수 있습니다.

더 많은 기능과 커스터마이징을 원하신다면 해당 패키지의 문서를 참고하여 사용해보세요.