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

플러터(Flutter) 어플리케이션을 개발할 때, 사용자에게 검색 기능을 제공하고 검색 결과에 해당하는 기사 정보를 표시해야 할 때가 있습니다. 이 때 flutter_typeahead 패키지를 사용하면 쉽게 구현할 수 있습니다.

flutter_typeahead 패키지 설치

먼저 pubspec.yaml 파일에 flutter_typeahead 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter

  flutter_typeahead: ^x.x.x

flutter_typeahead 패키지의 최신 버전을 사용하려면 x.x.x 부분을 해당 버전으로 변경하세요. 그리고 패키지를 터미널에서 다운로드 받기 위해 flutter packages get 명령어를 실행합니다.

기사 정보를 담은 모델 생성

검색 결과로 표시할 기사 정보를 담을 모델을 생성해야 합니다. 예를 들어, 기사의 제목과 작성자를 포함하는 Article 클래스를 다음과 같이 정의합니다.

class Article {
  final String title;
  final String author;

  Article({required this.title, required this.author});
}

flutter_typeahead 위젯 사용

이제 flutter_typeahead 패키지의 위젯을 사용하여 검색 기능을 구현할 수 있습니다. 다음 예제는 기사 목록에서 제목에 해당하는 검색 결과를 제공하는 위젯입니다.

TypeAheadField<Article>(
  textFieldConfiguration: TextFieldConfiguration(
    autofocus: true,
    decoration: InputDecoration(
      hintText: '검색',
      prefixIcon: Icon(Icons.search),
    ),
  ),
  suggestionsCallback: (pattern) async {
    // HTTP 요청 등을 통해 검색 결과를 가져옴
    List<Article> result = await fetchArticles(pattern);
    return result;
  },
  itemBuilder: (context, Article article) {
    return ListTile(
      title: Text(article.title),
      subtitle: Text(article.author),
    );
  },
  onSuggestionSelected: (Article article) {
    // 선택한 기사 정보 처리 로직
    navigateToArticleDetail(article);
  },
)

위 예제에서는 TypeAheadField 위젯을 생성하고 필요한 속성들을 설정합니다:

검색 결과 표시하기

검색 결과가 표시되는 위젯에서는 Article 객체의 정보를 적절히 활용하여 UI를 구성할 수 있습니다. 위 예제에서는 ListTile 위젯을 사용하여 기사 제목과 작성자를 표시합니다.

Article 클래스에는 제목과 작성자 외에도 다른 필드들이 있을 수 있으므로, 필요에 따라 itemBuilder 속성을 수정하여 원하는 대로 UI를 설계할 수 있습니다.

결론

위 예제를 참고하여 flutter_typeahead 패키지를 사용하여 플러터(Flutter) 어플리케이션에서 검색 기능을 구현하고 검색 결과에 해당하는 기사 정보를 표시할 수 있습니다. flutter_typeahead 패키지의 다양한 속성과 기능을 활용하여 원하는 검색 UI를 구성해보세요.

참고: