[flutter] 플러터 Flutter_typeahead에서 검색어 추천 기능 사용하기

플러터는 크로스 플랫폼 개발을 위한 개발 프레임워크로, UI 구성 요소를 쉽게 개발할 수 있습니다. flutter_typeahead은 텍스트 입력 필드에 자동 완성 및 검색어 추천 기능을 제공해주는 플러그인입니다. 이번 블로그 포스트에서는 flutter_typeahead을 사용하여 검색어 추천 기능을 구현하는 방법을 살펴보겠습니다.

1. flutter_typeahead 플러그인 추가하기

먼저, pubspec.yaml 파일에 flutter_typeahead 플러그인을 추가해야합니다. 아래와 같이 코드를 작성해주세요.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^x.x.x

버전 번호는 최신 버전으로 바꿔주셔야 합니다. flutter_typeahead는 플러터의 pub.dev에서 확인할 수 있습니다.

2. TypeAhead 위젯 사용하기

이제 flutter_typeaheadTypeAhead 위젯을 사용하여 검색어 추천 기능을 구현해보겠습니다. 먼저, 해당 위젯을 사용할 화면에 TypeAhead 위젯을 추가합니다. 아래와 같이 코드를 작성해주세요.

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    autofocus: true,
    decoration: InputDecoration(
      hintText: '검색어를 입력하세요',
      border: OutlineInputBorder(),
    ),
  ),
  suggestionsCallback: (pattern) async {
    // 검색어에 따라 추천 결과를 비동기로 가져오는 함수를 작성해주세요
    // 예를 들어, 네트워크 요청을 보내서 검색 결과를 가져올 수 있습니다.
  },
  itemBuilder: (context, suggestion) {
    // 추천 결과를 어떻게 보여줄지를 설정하는 함수를 작성해주세요
    // 예를 들어, ListTile을 사용하여 검색어를 보여줄 수 있습니다.
  },
  onSuggestionSelected: (suggestion) {
    // 추천된 검색어를 선택했을 때 실행되는 함수를 작성해주세요
    // 예를 들어, 선택된 검색어를 화면에 표시하거나 다른 동작을 수행할 수 있습니다.
  },
)

위의 코드에서 TextFieldConfiguration을 통해 텍스트 필드의 설정을 구성하고, suggestionsCallback을 통해 검색어에 따라 추천 결과를 가져오는 비동기 함수를 작성합니다. itemBuilder로 추천 결과를 어떻게 보여줄지를 설정하고, onSuggestionSelected에서 추천된 검색어를 선택했을 때 실행되는 함수를 작성합니다.

3. 검색어 추천 기능 사용하기

이제 flutter_typeaheadTypeAhead 위젯을 사용하여 검색어 추천 기능을 구현할 수 있습니다. 사용자가 검색어를 입력하면 suggestionsCallback에서 비동기로 검색 결과를 가져와 추천해줍니다.

예를 들어, 네트워크 요청을 통해 서버에서 검색어에 맞는 결과를 가져올 수 있습니다. 아래는 예시 코드입니다.


suggestionsCallback: (pattern) async {
    final response = await http.get(Uri.parse('http://api.example.com/search?q=$pattern'));
    final jsonData = jsonDecode(response.body);
    return jsonData['results'];
},

위의 예제에서는 비동기 함수를 먼저 정의하고, 이 함수에서 http 패키지를 사용하여 서버에 요청을 보내고, 응답 데이터에서 결과를 추출합니다.

마무리

이번 블로그 포스트에서는 플러터의 flutter_typeahead 플러그인을 사용하여 검색어 추천 기능을 구현하는 방법을 알아보았습니다. TypeAhead 위젯을 사용하면 간편하게 자동 완성 기능을 구현할 수 있으며, 서버와의 통신을 통해 동적인 추천 결과를 가져올 수도 있습니다. 플러터 개발을 하다가 검색어 추천 기능이 필요하다면 flutter_typeahead를 사용해보세요.