[flutter] 플러터에서의 bloc 패턴으로 데이터 정렬 및 필터링 기능 구현하기

20 Dec 2023

flutter

플러터 앱을 개발하다 보면 사용자가 특정 데이터를 원하는 기준에 따라 정렬하거나 필터링하는 기능을 구현해야 하는 경우가 많습니다. 이때 bloc 패턴을 활용하면 상태 관리와 더불어 데이터 정렬 및 필터링을 효율적으로 구현할 수 있습니다. 이번 포스트에서는 플러터에서의 bloc 패턴을 이용하여 데이터를 정렬하고 필터링하는 방법에 대해 자세히 살펴보겠습니다.

1. BLoC 패턴 개요

BLoC(Business Logic Component) 패턴은 플러터에서 애플리케이션 상태 및 사용자 이벤트 처리를 위한 디자인 패턴으로, UI와 비즈니스 로직을 분리하여 관리하는 데 유용합니다. BLoC 패턴은 스트림(Stream)을 기반으로 하며, 이벤트를 입력으로 받아들이고 상태를 출력으로 내보냅니다.

2. 데이터 정렬 및 필터링의 BLoC 패턴 적용

데이터를 정렬하고 필터링하는 기능을 구현하는데 있어서, BLoC 패턴을 적용하여 다음과 같은 단계를 따를 수 있습니다.

2.1. 데이터 모델 및 초기값 정의

class Data {
  final String name;
  final int value;

  Data({required this.name, required this.value});
}

enum SortOrder { ascending, descending }

enum FilterOption { all, positive, negative }

2.2. BLoC 클래스 생성

class DataBloc {
  final _dataController = StreamController<List<Data>>();
  final _sortOrderController = StreamController<SortOrder>();
  final _filterOptionController = StreamController<FilterOption>();

  StreamSink<List<Data>> get _inData => _dataController.sink;
  Stream<List<Data>> get outData => _dataController.stream;

  StreamSink<SortOrder> get updateSortOrder => _sortOrderController.sink;

  StreamSink<FilterOption> get updateFilterOption => _filterOptionController.sink;

  DataBloc() {
    _sortOrderController.stream.listen(_sort);
    _filterOptionController.stream.listen(_filter);
  }

  void _sort(SortOrder sortOrder) {
    // 데이터를 정렬하는 로직 구현
    _inData.add(sortedData);
  }

  void _filter(FilterOption filterOption) {
    // 데이터를 필터링하는 로직 구현
    _inData.add(filteredData);
  }

  void dispose() {
    _dataController.close();
    _sortOrderController.close();
    _filterOptionController.close();
  }
}

2.3. UI에서 BLoC 사용

class DataPage extends StatelessWidget {
  final DataBloc dataBloc = DataBloc();

  @override
  Widget build(BuildContext context) {
    // BLoC을 사용하여 데이터를 가져와 UI에 표시하는 로직 구현
  }

  @override
  void dispose() {
    dataBloc.dispose();
    super.dispose();
  }
}

결론

이렇게 BLoC 패턴을 활용하여 데이터를 정렬하고 필터링하는 기능을 구현할 수 있습니다. BLoC 패턴을 사용하면 비즈니스 로직을 UI로부터 분리하여 코드를 더욱 모듈화하고 유지보수하기 쉽게 만들 수 있습니다. 플러터 앱 개발시, BLoC 패턴을 활용하여 데이터 관련 기능을 구현한다면 보다 효율적인 개발을 할 수 있을 것입니다.

참고 자료

이상으로, 플러터에서의 bloc 패턴을 활용한 데이터 정렬 및 필터링 기능에 대해 알아보았습니다.