오늘은 네이버 지도의 검색기록을 만들 예정이다

가장 먼저 서치바를 클릭 시,

 SearchCategorySection(
                          onTap: () {
                            context
                                .read<NaverMapCubit>()
                                .updatePanelState(BottomSheetState.closed);
                          },
                          textBarColor: true,
                          textBarText: '주변 매장을 검색해보세요',
                          naverMapCategory: state.naverMapCategory,
                          selectedCategory: state.selectedCategory,
                          onCategorySelected: (category) {
                            context
                                .read<NaverMapCubit>()
                                .updateSelectedCategory(category, context);
                          },
                        ),

사용자의 모든 선택된 마커를 제거

이 후,

        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.sw),
          child: Searchbar(
            textEditing: textBarText,
            isColor: textBarColor,
            onTap: onTap,
          ),
        ),

재활용하는 위젯에서 2번 타고올라가서 값을 전달

child: SearchCategorySection(
                          onChanged: (value) {
                            print('value: $value');
                          },
                          onTap: () {
                            context
                                .read<NaverMapCubit>()
                                .updatePanelState(BottomSheetState.closed);
                          },
                          textBarColor: true,
                          textBarText: '주변 매장을 검색해보세요',
                          naverMapCategory: state.naverMapCategory,
                          selectedCategory: state.selectedCategory,
                          onCategorySelected: (category) {
                            context
                                .read<NaverMapCubit>()
                                .updateSelectedCategory(category, context);
                          },
                        ),

함수 실행은

  // 검색 카테고리 업데이트
  void updateSearchValue(String value, BuildContext context) {
    print('check ==> 함수 실행');
    emit(state.copyWith(searchValue: value));

    if (value.isEmpty) {
      // 검색어가 비어있으면 모든 마커 표시
      updateSelectedCategory(state.selectedCategory, context);
      return;
    }

    // 현재 선택된 카테고리에서 검색어로 필터링
    final filteredData = state.naverMapData.where((data) {
      if (state.selectedCategory != '전체' &&
          data.majorCategory != state.selectedCategory) {
        return false;
      }

      final searchLower = value.toLowerCase();
      // 모든 검색 가능한 필드에서 검색
      return (data.mainCategory?.toLowerCase().contains(searchLower) ??
              false) ||
          (data.majorCategory?.toLowerCase().contains(searchLower) ?? false) ||
          (data.marketName?.toLowerCase().contains(searchLower) ?? false) ||
          (data.marketDescription?.toLowerCase().contains(searchLower) ??
              false) ||
          (data.detailAddress?.toLowerCase().contains(searchLower) ?? false) ||
          (data.eventMessage?.toLowerCase().contains(searchLower) ?? false);
    }).toList();

    // 기존 마커 삭제 후 필터링된 마커만 표시
    state.mapController?.clearOverlays().then((_) {
      final Set<NAddableOverlay<NOverlay<void>>> markers = filteredData
          .map((data) => _createMarker(data) as NAddableOverlay<NOverlay<void>>)
          .toSet();

      state.mapController?.addOverlayAll(markers);
    });
  }

위 코드 처럼 진행을 하지만 사용자가 만약 카테고리 값을 직접 검색하면, 실제 카테고리가 변경될 수 있게 디테일 추가

  void updateSelectedCategory(String category, BuildContext context) async {
    emit(state.copyWith(selectedCategory: category));
    updatePanelState(BottomSheetState.closed);
    await state.mapController?.clearOverlays();

    final filteredData = category == '전체'
        ? state.naverMapData
        : state.naverMapData
            .where((data) => data.majorCategory == category)
            .toList();

    final Set<NAddableOverlay<NOverlay<void>>> markers = filteredData
        .map((data) => _createMarker(data) as NAddableOverlay<NOverlay<void>>)
        .toSet();

    await state.mapController?.addOverlayAll(markers);
    if (state.searchValue.isNotEmpty && context.mounted) {
      print('실행');
      updateSearchValue(state.searchValue, context);
    }
  }

마찬가지로 사용자가 검색어가 남아있는 상태에서 카테고리를 변경하면 다시 한번 서치밸류값을 검색해, 카테고리 내에서 재 검색할 수 있도록 진행

사용자가 만약 검색창을 초기화 한다면