[flutter] 플러터 Flutter_typeahead에서 검색 결과를 카드 형식으로 표시하는 방법은?

플러터(Flutter) 앱에서 사용자에게 검색 기능을 제공하려면 Flutter_typeahead 패키지를 사용할 수 있습니다. 이 패키지는 사용자가 입력한 내용에 대한 실시간 검색 결과를 표시해주는 기능을 제공합니다.

검색 결과를 카드 형식으로 표시하려면 다음과 같은 단계를 따를 수 있습니다.

  1. 카드 위젯 설치
    • 카드 형식으로 표시할 검색 결과를 감싸기 위해 카드 위젯을 설치해야 합니다.
    dependencies:
      flutter:
        sdk: flutter
      flutter_typeahead: ^3.2.0
    
  2. 검색 결과를 담을 데이터 모델 클래스 생성
    • 카드에 표시할 데이터를 담기 위한 데이터 모델 클래스를 생성합니다. 예를 들어, 검색 결과에는 제목(title)과 설명(description)이 있다고 가정해봅시다.
    class SearchResult {
      final String title;
      final String description;
         
      SearchResult({required this.title, required this.description});
    }
    
  3. 검색 결과를 카드로 변환하는 메소드 작성
    • 검색 결과를 받아서 카드 위젯으로 변환하는 메소드를 작성합니다. 이 메소드는 검색 결과를 담은 리스트를 받아서 각각의 결과를 카드로 변환하여 반환합니다.
    List<Widget> buildSearchResultCards(List<SearchResult> results) {
      List<Widget> cards = [];
         
      for (SearchResult result in results) {
        Widget card = Card(
          child: ListTile(
            title: Text(result.title),
            subtitle: Text(result.description),
          ),
        );
        cards.add(card);
      }
         
      return cards;
    }
    
  4. Flutter_typeahead 위젯 사용
    • Flutter_typeahead 위젯을 사용하여 검색 기능을 구현합니다. 이 위젯은 사용자의 입력에 따라 실시간으로 검색 결과를 제공해줍니다.
    FlutterTypeAhead(
      ...
      itemBuilder: (BuildContext context, SearchResult result) {
        return buildSearchResultCards(result);
      },
      ...
    )
    

이렇게 하면 플러터 Flutter_typeahead 패키지를 사용하여 검색 결과를 카드 형식으로 표시할 수 있습니다. 맞춤형 카드 디자인을 적용하려면 위젯의 속성을 조정하거나 별도의 위젯을 사용하여 원하는 디자인을 만들 수도 있습니다.

참고 자료: