[flutter] 플러터 Flutter_typeahead에서 검색 결과의 정렬 방식 변경하기

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 다양한 기능과 라이브러리를 제공합니다. 그 중에서도 Flutter_typeahead는 사용자에게 입력에 따른 자동완성 기능을 제공해주는 라이브러리입니다. 이 글에서는 Flutter_typeahead의 검색 결과 정렬 방식을 변경하는 방법에 대해 알아보겠습니다.

Flutter_typeahead란?

Flutter_typeahead는 사용자가 입력한 내용에 따라 자동완성 기능을 제공해주는 Flutter 라이브러리입니다. 이 라이브러리를 사용하면 효과적으로 검색 기능을 구현할 수 있습니다.

검색 결과의 정렬 방식 변경하기

Flutter_typeahead에서 검색 결과의 정렬 방식을 변경하려면 SuggestionSorter를 사용하면 됩니다. 기본적으로 이 라이브러리는 입력된 텍스트와 검색 결과의 매치 정도에 따라 정렬하지만, 만약 사용자의 요구에 따라 다른 정렬 방식을 적용하고 싶다면 custom SuggestionSorter 클래스를 만들어 사용하면 됩니다.

아래는 검색 결과를 알파벳순으로 정렬하는 SuggestionSorter 클래스의 예시입니다.

class AlphabeticalSorter<T extends String> extends SuggestionSorter<String> {
  @override
  List<String> sortSuggestions(String pattern, List<String> suggestions) {
    suggestions.sort((a, b) => a.compareTo(b));
    return suggestions;
  }
}

위의 예시 코드에서는 sortSuggestions 메서드를 오버라이딩하여 검색 결과를 알파벳순으로 정렬하도록 구현하였습니다. 이 외에도 원하는 정렬 방식에 맞게 sort 함수를 사용하여 구현할 수 있습니다.

사용자 정의 정렬 방식을 적용하기 위해서는 FlutterTypeAhead 위젯의 suggestionsBoxController 속성을 설정해야 합니다. suggestionsBoxControllerTypeAheadController를 인자로 받고, 여기에 사용자 정의 SuggestionSorter 클래스를 지정합니다.

아래는 FlutterTypeAhead 위젯에서 suggestionsBoxController 속성을 설정하여 알파벳순으로 정렬된 검색 결과를 사용하는 예시입니다.

TypeAheadController<String> _typeAheadController = TypeAheadController();
SuggestionSorter<String> alphabeticalSorter = AlphabeticalSorter();

FlutterTypeAhead(
  ...
  suggestionsBoxController: _typeAheadController,
  ...
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  onSuggestionSelected: (suggestion) {
    _typeAheadController.text = suggestion;
  },
  ...
)

위의 코드에서는 suggestionsBoxController 속성에 _typeAheadController를 전달하여 SortByAlphabetical 클래스를 적용합니다. 그리고 itemBuilderonSuggestionSelected 등의 속성은 기존과 동일하게 유지할 수 있습니다.

결론

Flutter_typeahead에서 검색 결과의 정렬 방식을 변경하는 방법을 알아보았습니다. SuggestionSorter 클래스를 상속하여 원하는 정렬 방식을 구현하고, suggestionsBoxController 속성을 통해 해당 정렬 방식을 적용할 수 있습니다. 이를 통해 사용자 정의의 검색 기능을 구현할 수 있습니다.

더 자세한 내용은 공식 문서를 참조하시기 바랍니다.