[flutter] 플러터 RxDart를 활용한 데이터 필터링 및 정렬 기능 구현

05 Dec 2023

flutter

플러터는 사용자 인터페이스(UI)를 만들기 위한 크로스 플랫폼 개발 프레임워크입니다. RxDart는 Dart 언어를 위한 반응형 프로그래밍 라이브러리로, 플러터 앱을 더욱 강력하고 유연하게 만들 수 있게 해줍니다. 이번 포스트에서는 플러터 RxDart를 활용하여 데이터를 필터링하고 정렬하는 기능을 구현하는 방법을 알아보겠습니다.

필터링 기능 구현하기

import 'package:rxdart/rxdart.dart';

// 데이터 모델 클래스
class Data {
  final String name;
  final int age;
  
  Data(this.name, this.age);
}

void main() {
  List<Data> dataList = [
    Data('John', 25),
    Data('Alice', 30),
    Data('Mike', 20),
  ];
  
  // 데이터를 담을 BehaviorSubject 생성
  BehaviorSubject<List<Data>> dataSubject = BehaviorSubject(seedValue: dataList);
  
  // 나이가 25살 이상인 데이터 필터링
  Stream<List<Data>> filteredStream = dataSubject.stream.map((dataList) {
    return dataList.where((data) => data.age >= 25).toList();
  });
  
  // 필터링된 데이터 구독
  filteredStream.listen((filteredDataList) {
    print('Filtered Data: $filteredDataList');
  });
  
  // 데이터 변경
  dataList.add(Data('Kate', 35));
  dataSubject.add(dataList);
}

먼저, 데이터를 담을 BehaviorSubject를 생성합니다. BehaviorSubject는 스트림에 연결된 현재 상태를 저장하는 기능이 있어, 스트림을 생성하고 그 결과를 계속 관찰할 수 있습니다.
dataSubject.stream.map을 사용하여 데이터를 필터링합니다. 필터링 조건은 where 메서드를 사용하여 나이가 25살 이상인 데이터만 선택합니다.
filteredStream.listen을 사용하여 필터링된 데이터를 구독합니다. 이를 통해 필터링된 데이터가 변경될 때마다 실행될 callback 함수를 등록할 수 있습니다.
데이터를 변경하고 dataSubject.add를 사용하여 변경된 데이터를 알립니다. 이렇게 하면 필터링된 데이터가 자동으로 업데이트됩니다.

정렬 기능 구현하기

import 'package:rxdart/rxdart.dart';

// 데이터 모델 클래스
class Data {
  final String name;
  final int age;
  
  Data(this.name, this.age);
}

void main() {
  List<Data> dataList = [
    Data('John', 25),
    Data('Alice', 30),
    Data('Mike', 20),
  ];
  
  // 데이터를 담을 BehaviorSubject 생성
  BehaviorSubject<List<Data>> dataSubject = BehaviorSubject(seedValue: dataList);
  
  // 나이순으로 데이터 정렬
  Stream<List<Data>> sortedStream = dataSubject.stream.map((dataList) {
    return dataList..sort((a, b) => a.age.compareTo(b.age));
  });
  
  // 정렬된 데이터 구독
  sortedStream.listen((sortedDataList) {
    print('Sorted Data: $sortedDataList');
  });
  
  // 데이터 변경
  dataList.add(Data('Kate', 35));
  dataSubject.add(dataList);
}

필터링과 마찬가지로, 데이터를 담을 BehaviorSubject를 생성합니다.
dataSubject.stream.map을 사용하여 데이터를 정렬합니다. sort 메서드를 사용하여 나이를 기준으로 데이터를 정렬합니다.
sortedStream.listen을 사용하여 정렬된 데이터를 구독합니다.
데이터를 변경하고 dataSubject.add를 사용하여 변경된 데이터를 알립니다. 이를 통해 정렬된 데이터가 자동으로 업데이트됩니다.

RxDart를 사용하면 플러터 앱에서 데이터를 더욱 쉽게 필터링하고 정렬할 수 있습니다. 이를 통해 사용자 인터페이스를 업데이트하고 데이터의 변화에 실시간으로 반응하는 기능을 구현할 수 있습니다.

필터링 기능 구현하기

정렬 기능 구현하기

참고 자료