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

개요

Flutter에서 텍스트 필드에 대한 자동 완성을 구현하기 위해 flutter_typeahead 패키지를 사용할 수 있습니다. 이 패키지를 사용하면 사용자가 텍스트를 입력할 때마다 자동 완성 옵션을 제공할 수 있습니다. 그러나 flutter_typeahead는 기본적으로 문자열 데이터만 처리하기 때문에, 검색 결과에 이미지 정보를 추가하려면 추가 작업이 필요합니다. 이 글에서는 flutter_typeahead를 사용하여 검색 결과에 이미지 정보를 표시하는 방법에 대해 알아보겠습니다.

세부 내용

  1. 먼저, flutter_typeahead 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일의 dependencies 섹션에 다음 내용을 추가합니다:
dependencies:
  flutter_typeahead: ^1.8.8
  1. 검색 결과에 표시할 데이터의 구조를 만들어야 합니다. 일반적으로 해당 데이터는 API를 호출하여 가져올 수 있습니다. 이 예제에서는 더미 데이터를 사용하여 설명하겠습니다. 데이터 구조를 정의하기 위해 다음과 같은 클래스를 만들어주세요:
class SearchResult {
  String title;
  String imageUrl;

  SearchResult({this.title, this.imageUrl});
}
  1. flutter_typeahead 위젯을 사용하여 텍스트 필드 및 자동 완성 옵션을 생성합니다. flutter_typeahead 위젯은 SuggestionWidgetBuilder라는 콜백 함수를 제공합니다. 이 콜백 함수를 사용하여 검색 결과를 구성하는 위젯을 만들 수 있습니다. 따라서, SuggestionWidgetBuilder를 구현하는 새로운 위젯을 생성합니다.
Widget _buildSuggestionWidget(BuildContext context, int index, SearchResult suggestion) {
  return ListTile(
    title: Text(suggestion.title),
    leading: Image.network(suggestion.imageUrl),
  );
}
  1. flutter_typeahead 위젯을 사용하는 페이지에서 _buildSuggestionWidget 메소드를 호출하는 build 메소드를 구현합니다:
class SearchPage extends StatelessWidget {
  final List<SearchResult> searchResults = [
    SearchResult(title: "Result 1", imageUrl: "https://example.com/image1.jpg"),
    SearchResult(title: "Result 2", imageUrl: "https://example.com/image2.jpg"),
    SearchResult(title: "Result 3", imageUrl: "https://example.com/image3.jpg"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Page"),
      ),
      body: TypeAheadField<SearchResult>(
        suggestionsCallback: (pattern) async {
          // 데이터를 가져오는 비동기 메소드 호출
          // 여기서는 더미 데이터를 반환합니다.
          return searchResults;
        },
        itemBuilder: _buildSuggestionWidget,
        onSuggestionSelected: (SearchResult suggestion) {
          // 선택한 검색 결과 처리
        },
      ),
    );
  }
}

결론

이제 flutter_typeahead 패키지를 사용하여 검색 결과에 이미지 정보를 표시할 수 있습니다. 위의 예제 코드를 참고하여 자신의 프로젝트에서 사용해 보세요! 참고로, 실제 데이터를 가져오기 위해서는 API 호출 등의 추가 로직이 필요할 수 있습니다.

참고 자료