[flutter] 플러터 Flutter_typeahead에서 검색 결과의 스타일링하기

Flutter는 Google에서 개발한 UI 프레임워크로, 깔끔하고 아름다운 앱 개발을 위해 사용됩니다. Flutter_typeahead는 플러터에서 자동 완성 검색 기능을 제공하는 패키지입니다. 이번 글에서는 Flutter_typeahead에서 검색 결과를 원하는 스타일로 꾸밀 수 있는 방법을 알아보겠습니다.

1. Flutter_typeahead 패키지 설치하기

먼저, 프로젝트에 Flutter_typeahead 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래의 내용을 추가하고, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치합니다.

dependencies:
  flutter_typeahead: ^1.8.0

2. 검색 결과 스타일링하기

검색 결과를 원하는 스타일로 꾸밀 수 있는 방법은 SuggestionBoxDecoration 클래스를 사용하는 것입니다. 예를 들어, 검색 결과 항목의 배경색을 노란색으로 설정하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

TypeAheadField(
  suggestionsBoxDecoration: SuggestionBoxDecoration(
    suggestionsBoxColor: Colors.yellow,
  ),
  // 기타 옵션 설정
);

위 코드에서 suggestionsBoxColor는 검색 결과 항목의 배경색을 지정하는 데 사용됩니다. 이외에도 SuggestionBoxDecoration 클래스에는 다양한 스타일링 옵션들이 존재합니다.

3. 커스텀 검색 결과 항목 위젯 사용하기

때로는 기본 검색 결과 항목보다 더 복잡한 위젯을 사용하고 싶을 수 있습니다. 이를 위해 suggestionsCallback 콜백 함수에서 커스텀 위젯을 반환할 수 있습니다. 예를 들어, 아이콘과 텍스트를 함께 표시하는 커스텀 위젯을 만들고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

TypeAheadField(
  suggestionsCallback: (pattern) async {
    // 검색 로직
    // 검색 결과 리스트 반환
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      leading: Icon(Icons.search),
      title: Text(suggestion),
    );
  },
  // 기타 옵션 설정
);

위 코드에서 itemBuilder는 검색 결과 항목을 커스텀 위젯으로 반환하는 역할을 합니다. 이를 통해 검색 결과 항목을 개별적으로 스타일링하거나, 원하는 형태로 표시할 수 있습니다.

4. 결론

Flutter_typeahead는 Flutter 앱에서 자동 완성 검색 기능을 쉽게 구현할 수 있도록 도와주는 훌륭한 패키지입니다. 이번 글에서는 검색 결과의 스타일링에 대해 알아보았습니다. 원하는 스타일로 검색 결과를 꾸며서 더 효과적인 사용자 경험을 제공해보세요!


참고: