[flutter] 플러터 Flutter_typeahead에서 검색 결과에 아이콘 추가하기

플러터(Flutter)는 크로스 플랫폼 앱 개발을 위한 빠르고 강력한 프레임워크입니다. Flutter_typeahead는 사용자에게 실시간으로 검색 제안을 제공하는 기능을 제공하는 플러그인입니다. 이 플러그인을 사용하여 검색 결과에 아이콘을 추가하는 방법을 알아보겠습니다.

1. Flutter_typeahead 플러그인 설치하기

먼저, pubspec.yaml 파일에 Flutter_typeahead 플러그인을 추가합니다. 아래의 코드를 dependencies 섹션에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  flutter_typeahead: ^1.8.8

이제 터미널을 열고 다음 명령어를 실행하여 플러그인을 설치합니다.

flutter pub get

2. 아이콘 추가하기

Flutter_typeahead에서 검색 결과에 아이콘을 추가하려면 SuggestionItemBuilder 콜백 함수를 사용해야 합니다. 이 콜백 함수를 사용하여 각 검색 결과의 아이콘을 정의할 수 있습니다.

먼저, SuggestionItemBuilder를 사용하여 검색 결과를 위한 새로운 위젯을 생성하겠습니다. 이 위젯은 ListTile을 사용하여 아이콘과 텍스트를 포함합니다.

Widget _buildSuggestionItem(BuildContext context, String suggestion) {
  return ListTile(
    leading: Icon(Icons.search),
    title: Text(suggestion),
  );
}

위의 예시에서는 leading 프로퍼티를 사용하여 각 검색 결과에 아이콘을 추가하였습니다. 여기에서는 Icons.search 아이콘을 사용하였습니다. 원하는 아이콘을 선택하여 사용할 수 있습니다.

다음으로, TypeAheadFormField 위젯을 생성하고 suggestionBuilder 프로퍼티에 위에서 정의한 SuggestionItemBuilder를 할당합니다.

TypeAheadFormField<String>(
  ...
  suggestionBuilder: (BuildContext context, List<String> suggestions) {
    return ListView.builder(
      itemCount: suggestions.length,
      itemBuilder: (BuildContext context, int index) {
        return _buildSuggestionItem(context, suggestions[index]);
      },
    );
  },
  ...
)

위의 예시에서는 TypeAheadFormField 위젯 안에 suggestionBuilder 프로퍼티를 추가하고, 해당 프로퍼티에 ListView.builder 위젯을 할당하였습니다. 이 때, itemCount를 통해 검색 결과의 개수를 지정하고, itemBuilder를 통해 각 검색 결과의 위젯을 생성합니다. 이 때, 위에서 정의한 _buildSuggestionItem 함수를 사용하여 위젯을 생성합니다.

3. 완성된 예제

위의 내용을 종합하여 플러터 Flutter_typeahead에서 검색 결과에 아이콘을 추가하는 예제 코드를 제공합니다.

import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

class MySearchWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Widget'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TypeAheadFormField<String>(
          suggestionsCallback: (pattern) async {
            // 검색 결과를 가져오는 비동기 함수 호출
            // 예시로 고정된 검색 결과 리스트를 반환하도록 구현
            return [
              'Apple',
              'Banana',
              'Cherry',
            ];
          },
          itemBuilder: (BuildContext context, String suggestion) {
            return ListTile(
              leading: Icon(Icons.search),
              title: Text(suggestion),
            );
          },
          onSuggestionSelected: (String suggestion) {
            print(suggestion);
          },
        ),
      ),
    );
  }
}

위의 예제에서는 MySearchWidget이라는 위젯을 생성하고, TypeAheadFormField 위젯을 그 안에 추가하였습니다. 검색 결과는 예시로 고정된 리스트를 반환하도록 하였고, 선택한 검색어는 콘솔에 출력하도록 하였습니다.

이렇게하여 플러터 Flutter_typeahead에서 검색 결과에 아이콘을 추가할 수 있습니다. 자세한 내용은 Flutter_typeahead 플러그인 문서를 참고하세요.