[flutter] 플러터 Flutter_typeahead에서 검색 결과의 게임 정보 표시하기

소개

Flutter는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, 다양한 기능과 라이브러리를 제공합니다. Flutter_typeahead는 Flutter에서 자동 완성 및 검색 기능을 구현할 수 있는 라이브러리입니다.

이번 포스트에서는 Flutter_typeahead를 사용하여 검색 결과에 해당하는 게임 정보를 표시하는 방법에 대해서 알아보겠습니다.

Flutter_typeahead 설치하기

먼저, Flutter 프로젝트에서 Flutter_typeahead를 설치해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^latest_version

latest_version에는 사용하고자 하는 Flutter_typeahead의 최신 버전을 입력해야 합니다. 그리고 의존성을 추가한 후에는 Flutter 프로젝트를 업데이트해주세요.

Flutter_typeahead 사용 방법

Flutter_typeahead는 TypeAhead 위젯을 사용하여 자동 완성 및 검색 기능을 구현합니다. 먼저, 검색 필드를 제공하기 위해 TextField 위젯을 추가해주세요. 자동 완성 기능을 구현하고자 하는 경우, TypeAhead 위젯을 TextFieldcontroller 속성에 연결해야 합니다.

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    controller: _searchController,
    decoration: InputDecoration(
      hintText: "게임을 검색하세요",
    ),
  ),
  suggestionsCallback: (pattern) async {
    // 검색 결과를 가져오는 비동기 함수 호출
    return await fetchGameSuggestions(pattern);
  },
  itemBuilder: (context, suggestion) {
    // 각 검색 결과를 표시하기 위한 위젯 반환
    return ListTile(
      title: Text(suggestion.title),
      subtitle: Text(suggestion.platform),
    );
  },
  onSuggestionSelected: (suggestion) {
    // 검색 결과 선택 시 동작하는 함수 호출
    navigateToGameDetail(suggestion.id);
  },
)

위의 코드에서 textFieldConfiguration에는 TextField 위젯의 구성을 설정합니다. suggestionsCallback에는 입력된 텍스트에 대한 검색 결과를 가져오는 비동기 함수를 설정하고, itemBuilder에는 각 검색 결과를 표시하기 위한 위젯을 반환하는 함수를 설정합니다. 마지막으로, onSuggestionSelected는 검색 결과를 선택했을 때 동작하는 함수를 설정합니다.

검색 결과의 게임 정보 표시하기

이제 검색 결과에 해당하는 게임 정보를 표시하는 방법에 대해서 알아보겠습니다. 위의 코드에서 itemBuilder 함수에서 반환하는 위젯을 원하는 방식대로 수정하면 됩니다. 예를 들어, 게임의 제목과 플랫폼을 함께 표시하고 싶은 경우에는 다음과 같이 수정할 수 있습니다.

itemBuilder: (context, suggestion) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        suggestion.title,
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 4),
      Text(
        suggestion.platform,
        style: TextStyle(
          color: Colors.grey,
        ),
      ),
    ],
  );
},

위의 코드에서는 Column 위젯을 사용하여 게임 제목과 플랫폼을 수직으로 정렬하고, Text 위젯을 사용하여 각 정보를 표시합니다. 필요에 따라 스타일을 수정하거나 추가 정보를 표시할 수 있습니다.

마무리

이번 포스트에서는 Flutter_typeahead를 사용하여 검색 결과에 해당하는 게임 정보를 표시하는 방법에 대해서 알아보았습니다. Flutter_typeahead를 활용하면 간편하게 자동 완성 및 검색 기능을 구현할 수 있으며, 검색 결과를 원하는 방식으로 표시할 수 있습니다.

더 많은 정보를 원하신다면, Flutter_typeahead 공식 문서를 참고해주세요.