[flutter] 플러터 Flutter_typeahead에서 검색어 자동 완성 기능 사용하기

플러터(Flutter)는 Google에서 만든 UI 프레임워크로, Mobile, Web, Desktop 등 다양한 플랫폼에서 동일한 코드로 애플리케이션을 개발할 수 있습니다. Flutter를 사용하여 개발하는 동안, 검색어 자동 완성 기능을 구현해야 할 때가 있습니다. 이를 위해 flutter_typeahead 패키지를 사용할 수 있습니다.

flutter_typeahead 패키지란?

flutter_typeahead 패키지는 플러터(Flutter) 애플리케이션에서 검색어 자동 완성 및 예측 기능을 제공하는 패키지입니다. 이 패키지를 사용하면 사용자가 검색어를 입력할 때마다 API를 호출하여 검색어 자동 완성 목록을 제공할 수 있습니다.

패키지 설치하기

먼저, flutter_typeahead 패키지를 프로젝트에 설치해야 합니다. pubspec.yaml 파일에 아래와 같은 의존성을 추가하세요:

dependencies:
  flutter_typeahead: ^2.0.0

명령 프롬프트 또는 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치하세요.

검색어 자동 완성 위젯 추가하기

패키지를 설치한 후, 검색어 자동 완성을 구현할 위젯을 추가해야 합니다. 아래는 예시 코드입니다.

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    decoration: InputDecoration(
      labelText: 'Search',
      border: OutlineInputBorder(),
    ),
  ),
  suggestionsCallback: (pattern) async {
    // API 호출 등의 비동기 작업을 수행하여 검색어 자동 완성 목록을 가져옵니다.
    // 예제에서는 간단히 정적 목록을 반환합니다.
    return ['Apple', 'Banana', 'Orange']
        .where((item) => item.toLowerCase().contains(pattern.toLowerCase()));
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  onSuggestionSelected: (suggestion) {
    // 선택된 검색어를 처리하는 로직을 추가하세요.
  },
)

위의 코드에서 suggestionsCallback 함수는 검색어 자동 완성 목록을 가져옵니다. 이 함수에서는 실제로 API 요청을 보내거나, 예제처럼 정적 목록을 반환할 수 있습니다. itemBuilder 함수는 각 검색어를 어떻게 표시할지를 정의합니다. 위의 예제에서는 ListTile을 사용하여 간단하게 검색어를 표시합니다.

또한, onSuggestionSelected 콜백 함수에서는 사용자가 검색어를 선택했을 때의 동작을 정의합니다.

정리

이번 포스트에서는 플러터(Flutter) 애플리케이션에서 검색어 자동 완성 기능을 구현하는 방법에 대해 알아보았습니다. flutter_typeahead 패키지를 사용하여 간단하게 검색어 자동 완성 위젯을 추가할 수 있습니다. 다양한 비동기 작업과 API 호출을 통해 실제 검색어 자동 완성 기능을 구현할 수 있습니다.

더 자세한 정보는 FlutterTypeAhead GitHub 레포지토리를 참고하세요.