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

플러터(Flutter)는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 다양한 기능과 라이브러리를 제공합니다. 그 중 하나인 Flutter_typeahead는 자동완성 기능을 구현할 수 있는 라이브러리입니다. 이 라이브러리를 사용하여 검색 기능을 구현하고, 검색 결과에 별점 정보를 표시하는 방법에 대해 알아보겠습니다.

Flutter_typeahead 설치하기

먼저, Flutter_typeahead를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요:

dependencies:
  flutter_typeahead: ^1.9.0

의존성을 추가한 후, 패키지를 가져오기 위해 아래 명령어를 실행해주세요:

flutter pub get

검색 결과에 별점 정보 표시하기

검색 결과에 별점 정보를 표시하기 위해서는 별도의 데이터 소스가 필요합니다. 별점 정보는 API를 통해 가져와야 하며, 이 예제에서는 가상의 getStarRating 함수를 이용하여 별점 정보를 가져온다고 가정하겠습니다.

Future<double> getStarRating(String searchText) async {
  // 검색어를 기반으로 API 요청을 보내 별점 정보를 가져온다.
  // 이 부분은 실제 API와 연동하여 구현되어야 한다.
  // 가상의 코드로 가져오기 위해 sleep 함수로 대체하였다.
  await Future<dynamic>.delayed(const Duration(seconds: 2));
  
  // 가상의 별점 데이터를 반환한다.
  return 4.5;
}

이제 Flutter_typeahead를 사용하여 자동완성 검색을 구현해보겠습니다. TypeAhead 위젯을 사용하여 검색 기능을 구현하면서 검색 결과 마다 해당하는 별점 정보를 표시할 수 있습니다.

class SearchBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TypeAheadField(
      itemBuilder: (context, suggestion) {
        return ListTile(
          title: Text(suggestion),
          subtitle: FutureBuilder<double>(
            future: getStarRating(suggestion),
            builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Text('Loading...'); // 로딩 중 표시
              }
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}'); // 에러 발생 시 표시
              }
              return Text('별점: ${snapshot.data}'); // 별점 정보 표시
            },
          ),
        );
      },
      suggestionsCallback: (pattern) async {
        // 검색어에 따른 검색 결과를 가져온다.
        // 이 부분은 실제 API와 연동하여 구현되어야 한다.
        // 가상의 검색 결과를 반환하는 코드로 대체하였다.
        await Future<dynamic>.delayed(const Duration(seconds: 1));
      
        // 가상의 검색 결과를 반환한다.
        return [
          'Apple',
          'Banana',
          'Cherry',
        ].where((item) => item.toLowerCase().startsWith(pattern.toLowerCase())).toList();
      },
      onSuggestionSelected: (suggestion) {
        // 검색 결과 선택 시 동작
        // 현재 예제에서는 아무 동작도 수행하지 않음
      },
    );
  }
}

위의 코드에서 검색 결과를 표시하는 ListTile 위젯의 subtitle 속성에 FutureBuilder를 사용하여 비동기적으로 별점 정보를 가져와 표시하고 있습니다. getStarRating 함수는 별점 정보를 가져오는 가상의 함수로, 실제 API와 연동하여 별점 정보를 가져와야 합니다.

이제 검색창과 검색 결과에 별점 정보가 함께 표시되는 Flutter 애플리케이션을 개발할 수 있습니다.