[flutter] 플러터 Flutter_typeahead에서 검색 결과를 다중 선택할 수 있는 기능 추가하기

플러터(Flutter)는 모바일 앱 개발을 위한 인기 있는 프레임워크입니다. Flutter_typeahead는 플러터에서 자동 완성 기능을 구현할 수 있는 패키지 중 하나입니다. 다중 선택 기능을 추가하여 플러터에서 검색 결과를 선택할 수 있는 기능을 구현해보겠습니다.

1. Flutter_typeahead 패키지 추가

먼저, flutter_typeahead 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter_typeahead: ^2.0.0

이후, 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다:

flutter pub get

2. 다중 선택을 위한 상태 관리

다중 선택을 위해서는 선택된 항목들을 저장할 상태 변수가 필요합니다. Set이나 List를 사용하여 선택된 항목들을 저장할 수 있습니다. 예를 들어, 다음과 같이 상태 변수를 정의할 수 있습니다:

Set<String> selectedItems = Set<String>();

3. Flutter_typeahead 위젯 사용

flutter_typeahead 패키지의 TypeAhead 위젯을 사용하여 자동 완성 기능을 구현할 수 있습니다. TypeAhead 위젯을 사용하여 검색 결과를 표시하고, 선택한 항목들을 관리하는 로직을 추가해보겠습니다.

TypeAheadField(
  suggestionsCallback: (pattern) async {
    // 검색 결과를 가져오는 비동기 함수를 호출하여 검색어에 따른 결과를 반환합니다.
    // 예: API 요청이나 로컬 데이터베이스 조회 등
    // 검색 결과는 List<String> 형태로 반환합니다.
    return await fetchResults(pattern);
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
      onTap: () {
        setState(() {
          // 항목을 선택한 경우, 상태 변수에 선택한 항목을 추가합니다.
          selectedItems.add(suggestion);
        });
      },
    );
  },
  onSuggestionSelected: (suggestion) {
    setState(() {
      // 검색 결과 중 하나를 선택한 경우, 상태 변수에 선택한 항목을 추가합니다.
      selectedItems.add(suggestion);
    });
  },
  textFieldConfiguration: TextFieldConfiguration(
    onChanged: (text) {
      // 검색어를 입력할 때마다 호출되는 콜백 함수를 정의합니다.
      // 필요한 로직을 구현해주세요.
    },
  ),
),

위 코드에서 suggestionsCallback은 검색어에 따른 결과를 가져오는 비동기 함수를 정의합니다. itemBuilder는 검색 결과를 표시할 때의 UI를 정의합니다. onTap 콜백 함수에서 선택한 항목을 상태 변수에 추가합니다. onSuggestionSelected는 검색 결과 중 하나를 선택한 경우를 처리합니다. textFieldConfiguration으로는 검색어를 입력할 때마다 호출되는 콜백 함수를 정의할 수 있습니다.

4. 선택된 항목 표시하기

마지막으로, 선택된 항목들을 표시하는 UI를 추가해보겠습니다. 예를 들어, 선택된 항목들을 ListView로 표시하는 방법은 다음과 같습니다:

ListView(
  children: selectedItems.map((item) {
    return ListTile(
      title: Text(item),
      trailing: IconButton(
        icon: Icon(Icons.remove_circle),
        onPressed: () {
          setState(() {
            // 선택된 항목 중에서 삭제 버튼을 누른 항목을 상태 변수에서 제거합니다.
            selectedItems.remove(item);
          });
        },
      ),
    );
  }).toList(),
),

선택된 항목들을 selectedItems에 저장한 뒤, ListView 적절한 위치에 선택된 항목을 나타내는 UI를 구현하면 됩니다. 위 코드에서는 항목을 제거하는 로직을 추가하여, 삭제 버튼을 눌렀을 때 선택된 항목이 상태 변수에서 제거되도록 구현하였습니다.

이렇게 하면 플러터에서 다중 선택이 가능한 Flutter_typeahead 기능을 구현할 수 있습니다. 위 코드를 참고하여 자신의 프로젝트에 적용해보세요!

참고 문서: