[flutter] 플러터 Flutter_typeahead에서 추천 검색어 목록 표시하기

플러터(Flutter)는 구글에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. Flutter는 UI와 비즈니스 로직을 하나의 코드베이스에서 작성하여 안드로이드 및 iOS 애플리케이션을 동시에 개발할 수 있게 해줍니다.

Flutter_typeahead는 Flutter에서 사용할 수 있는 플러그인 중 하나입니다. 이 플러그인을 사용하면 사용자가 텍스트 입력 상자에 입력할 때 자동 완성 기능을 구현할 수 있습니다. 이 기능을 사용하여 추천 검색어 목록을 표시하는 방법을 알아보겠습니다.

1. Flutter_typeahead 패키지 설치하기

먼저, pubspec.yaml 파일에서 flutter_typeahead 패키지를 추가해야 합니다. 다음과 같이 dependencies 부분에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^3.0.0

패키지를 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 다운로드하고 설치합니다.

2. 추천 검색어 목록 구현하기

우선, flutter_typeahead 패키지를 사용할 수 있도록 import 문을 추가합니다.

import 'package:flutter_typeahead/flutter_typeahead.dart';

다음으로, FlutterTypeahead 위젯을 사용하여 자동 완성 텍스트 입력 상자를 생성합니다.

FlutterTypeahead(
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  suggestionsCallback: (pattern) async {
    // 추천 검색어 목록을 가져오는 비동기 함수 호출
    // pattern은 사용자가 입력한 텍스트
    // 비동기 함수에서는 검색 결과를 반환해야 함
    // 예: return await getSearchSuggestions(pattern);
  },
  onSuggestionSelected: (suggestion) {
    // 사용자가 추천 검색어를 선택했을 때 실행할 코드 작성
    // 예: search(suggestion);
  },
)

itemBuilder 콜백 함수에서는 각 추천 검색어가 어떻게 표시될지 정의합니다. 이 예제에서는 간단히 ListTile 위젯을 사용하여 텍스트로 표시합니다.

suggestionsCallback 콜백 함수에서는 사용자가 입력한 텍스트를 기반으로 추천 검색어 목록을 가져옵니다. 이 함수는 비동기로 작성되어야 하며, 결과는 검색어 목록으로 반환되어야 합니다.

onSuggestionSelected 콜백 함수에서는 사용자가 추천 검색어를 선택했을 때 실행할 코드를 작성합니다. 예를 들어, 선택한 검색어로 실제 검색을 수행하는 함수를 호출할 수 있습니다.

3. 예제 코드

아래는 flutter_typeahead 패키지를 사용하여 추천 검색어 목록을 표시하는 예제 코드입니다.

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

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search"),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: FlutterTypeahead(
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          suggestionsCallback: (pattern) async {
            // 예제를 위해 하드코딩된 추천 검색어 목록
            final List<String> suggestionList = [
              "apple",
              "banana",
              "cherry",
              "durian",
              "elderberry",
            ];

            // 입력된 패턴과 일치하는 검색어 목록 가져오기
            return suggestionList
                .where((suggestion) => suggestion.startsWith(pattern))
                .toList();
          },
          onSuggestionSelected: (suggestion) {
            // 검색어 선택 시 실행할 코드 작성
            print(suggestion);
            // 예: search(suggestion);
          },
        ),
      ),
    );
  }
}

이 예제에서는 하드코딩된 추천 검색어 목록을 사용하여 검색어를 입력하는 동안 해당 목록을 표시합니다. 패턴과 일치하는 검색어만 표시하기 위해 where 함수를 사용하고, 선택된 검색어를 콘솔에 출력하도록 print 함수를 호출합니다.

이렇게 하면 flutter_typeahead 패키지를 사용하여 플러터 앱에서 추천 검색어 목록을 표시할 수 있습니다. 사용자가 텍스트를 입력할 때마다 실시간으로 추천 검색어를 업데이트할 수 있고, 선택한 검색어로 원하는 작업을 수행할 수 있습니다.