[flutter] 플러터 Flutter_typeahead에서 검색어 추천 목록의 디자인 변경하기

이번에는 플러터(Flutter)의 flutter_typeahead 패키지를 사용하여 검색어 추천 목록의 디자인을 변경하는 방법에 대해 알아보겠습니다.

1. flutter_typeahead 패키지 설치하기

먼저, flutter_typeahead 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter_typeahead: ^1.4.1

2. 검색어 추천 목록 디자인 변경하기

flutter_typeahead 패키지를 사용하면 사용자가 검색어를 입력할 때마다 실시간으로 검색어 추천 목록을 보여줄 수 있습니다. 이 추천 목록의 디자인을 변경하기 위해 SuggestionBoxDecoration 위젯을 사용할 수 있습니다.

import 'package:flutter_typeahead/flutter_typeahead.dart';

class CustomSuggestionBoxDecoration extends SuggestionBoxDecoration {
  @override
  BoxDecoration get decoration {
    return BoxDecoration(
      color: Colors.blue,  // 원하는 색상으로 변경
      borderRadius: BorderRadius.circular(10),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 3,
          blurRadius: 7,
          offset: Offset(0, 3), // 그림자의 위치 조정
        ),
      ],
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TypeAheadField(
          suggestionsBoxDecoration: CustomSuggestionBoxDecoration(),
          itemBuilder: (context, suggestion) {
            return ListTile(
              title: Text(suggestion),
            );
          },
          suggestionsCallback: (pattern) async {
            // 검색어에 맞는 추천 목록을 가져오는 로직 작성
          },
          onSuggestionSelected: (suggestion) {
            // 선택된 추천어에 대한 동작 정의
          },
        ),
      ),
    );
  }
}

이렇게 CustomSuggestionBoxDecoration 클래스를 정의하여 SuggestionBoxDecorationdecoration을 오버라이드하면, 검색어 추천 목록의 디자인을 원하는대로 변경할 수 있습니다.

결론

flutter_typeahead 패키지를 사용하여 플러터 앱에서 검색어 추천 목록의 디자인을 변경하는 방법에 대해 알아보았습니다. 원하는 스타일에 맞게 SuggestionBoxDecoration을 커스텀하고, TypeAheadField 위젯에서 이 커스텀 스타일을 적용할 수 있습니다. 이를 통해 사용자에게 더 좋은 검색 경험을 제공할 수 있습니다.

참고 자료