Flutter의 RxDart 사용법

RxDart는 ReactiveX의 Dart 구현체로, Flutter 애플리케이션에서 반응형 프로그래밍을 쉽게 구현할 수 있게 도와줍니다. RxDart는 데이터 스트림을 사용하여 이벤트 기반 프로그래밍을 단순화하고, 비동기 작업을 보다 효율적으로 관리할 수 있습니다. 이번 글에서는 Flutter에서 RxDart를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. RxDart 패키지 설치

RxDart를 사용하려면 rxdart 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.27.3

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. 기본 사용법

RxDart의 기본 개념은 Stream과 유사합니다. RxDart는 Stream을 확장하여 다양한 연산자를 제공합니다. BehaviorSubject는 가장 최근의 값을 기억하는 스트림 컨트롤러로, 새로운 리스너가 구독할 때 즉시 최신 값을 전달합니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RxDartExample(),
    );
  }
}

class RxDartExample extends StatefulWidget {
  @override
  _RxDartExampleState createState() => _RxDartExampleState();
}

class _RxDartExampleState extends State<RxDartExample> {
  final BehaviorSubject<int> _subject = BehaviorSubject<int>();

  @override
  void initState() {
    super.initState();
    _subject.add(1);
    _subject.stream.listen((data) {
      print('Listener: $data');
    });
  }

  @override
  void dispose() {
    _subject.close();
    super.dispose();
  }

  void _incrementCounter() {
    _subject.add(_subject.value + 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RxDart Example')),
      body: Center(
        child: StreamBuilder<int>(
          stream: _subject.stream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Count: ${snapshot.data}');
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 BehaviorSubject를 사용하여 카운터 값을 관리하는 간단한 예제입니다. 초기 값으로 1을 설정하고, 버튼을 클릭할 때마다 카운터 값을 증가시킵니다. StreamBuilder를 사용하여 스트림의 값을 UI에 반영합니다.

 

 

728x90

 

 

3. 여러 스트림 결합

RxDart는 여러 스트림을 결합하고 변환하는 다양한 연산자를 제공합니다. combineLatest 연산자를 사용하여 두 개의 스트림을 결합하고, 가장 최신의 값을 전달받을 수 있습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CombineLatestExample(),
    );
  }
}

class CombineLatestExample extends StatefulWidget {
  @override
  _CombineLatestExampleState createState() => _CombineLatestExampleState();
}

class _CombineLatestExampleState extends State<CombineLatestExample> {
  final BehaviorSubject<int> _subject1 = BehaviorSubject<int>();
  final BehaviorSubject<int> _subject2 = BehaviorSubject<int>();
  late Stream<int> _combinedStream;

  @override
  void initState() {
    super.initState();
    _subject1.add(1);
    _subject2.add(10);
    _combinedStream = Rx.combineLatest2(
      _subject1.stream,
      _subject2.stream,
      (int value1, int value2) => value1 + value2,
    );
  }

  @override
  void dispose() {
    _subject1.close();
    _subject2.close();
    super.dispose();
  }

  void _incrementSubject1() {
    _subject1.add(_subject1.value + 1);
  }

  void _incrementSubject2() {
    _subject2.add(_subject2.value + 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CombineLatest Example')),
      body: Center(
        child: StreamBuilder<int>(
          stream: _combinedStream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Combined Count: ${snapshot.data}');
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _incrementSubject1,
            child: Icon(Icons.exposure_plus_1),
            heroTag: 'btn1',
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: _incrementSubject2,
            child: Icon(Icons.exposure_plus_2),
            heroTag: 'btn2',
          ),
        ],
      ),
    );
  }
}

 

위 코드는 두 개의 BehaviorSubject를 사용하여 각각의 스트림을 생성하고, combineLatest2 연산자를 사용하여 두 스트림을 결합하는 예제입니다. 두 스트림의 값을 더한 결과를 StreamBuilder를 통해 UI에 반영합니다.

 

 

반응형

 

 

4. debounce와 throttle 사용

RxDart는 스트림의 이벤트를 제어하기 위한 다양한 연산자를 제공합니다. debounce와 throttle 연산자를 사용하여 이벤트 방출을 제어할 수 있습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DebounceThrottleExample(),
    );
  }
}

class DebounceThrottleExample extends StatefulWidget {
  @override
  _DebounceThrottleExampleState createState() => _DebounceThrottleExampleState();
}

class _DebounceThrottleExampleState extends State<DebounceThrottleExample> {
  final BehaviorSubject<int> _subject = BehaviorSubject<int>();
  late Stream<int> _debouncedStream;
  late Stream<int> _throttledStream;
  int _count = 0;

  @override
  void initState() {
    super.initState();
    _debouncedStream = _subject.stream.debounceTime(Duration(seconds: 1));
    _throttledStream = _subject.stream.throttleTime(Duration(seconds: 1));
  }

  @override
  void dispose() {
    _subject.close();
    super.dispose();
  }

  void _incrementCounter() {
    _count++;
    _subject.add(_count);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Debounce & Throttle Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StreamBuilder<int>(
              stream: _debouncedStream,
              builder: (context, snapshot) {
                return Text('Debounced: ${snapshot.data ?? 0}');
              },
            ),
            SizedBox(height: 20),
            StreamBuilder<int>(
              stream: _throttledStream,
              builder: (context, snapshot) {
                return Text('Throttled: ${snapshot.data ?? 0}');
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 debounceTime과 throttleTime 연산자를 사용하여 이벤트 방출을 제어하는 예제입니다. debounceTime은 이벤트가 방출된 후 지정된 시간 동안 추가 이벤트가 발생하지 않을 때 이벤트를 방출하고, throttleTime은 지정된 시간 간격으로 이벤트를 방출합니다.

5. BehaviorSubject와 PublishSubject

RxDart에서 BehaviorSubject와 PublishSubject는 자주 사용되는 주제입니다. BehaviorSubject는 가장 최근의 값을 기억하고, 새로운 리스너가 구독할 때 즉시 최신 값을 전달합니다. 반면에 PublishSubject는 새로운 리스너가 구독할 때 이전 값을 전달하지 않고, 새로운 이벤트만 전달합니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SubjectExample(),
    );
  }
}

class SubjectExample extends StatefulWidget {
  @override
  _SubjectExampleState createState() => _SubjectExampleState();
}

class _SubjectExampleState extends State<SubjectExample> {
  final BehaviorSubject<int> _behaviorSubject = BehaviorSubject<int>();
  final PublishSubject<int> _publishSubject = PublishSubject<int>();

  @override
  void initState() {
    super.initState();
    _behaviorSubject.add(1);
    _publishSubject.add(1);
  }

  @override
  void dispose() {
    _behaviorSubject.close();
    _publishSubject.close();
    super.dispose();
  }

  void _incrementCounter() {
    _behaviorSubject.add(_behaviorSubject.value + 1);
    _publishSubject.add(_publishSubject.value + 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Subject Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            StreamBuilder<int>(
              stream: _behaviorSubject.stream,
              builder: (context, snapshot) {
                return Text('BehaviorSubject: ${snapshot.data}');
              },
            ),
            SizedBox(height: 20),
            StreamBuilder<int>(
              stream: _publishSubject.stream,
              builder: (context, snapshot) {
                return Text('PublishSubject: ${snapshot.data}');
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

 

위 코드는 BehaviorSubject와 PublishSubject를 사용하여 스트림을 생성하고 데이터를 방출하는 예제입니다. 두 스트림 모두 버튼 클릭 시 값을 증가시키지만, 새로운 리스너가 구독할 때 BehaviorSubject는 최신 값을 전달하고, PublishSubject는 새로운 이벤트만 전달합니다.

결론

Flutter 애플리케이션에서 RxDart를 사용하면 반응형 프로그래밍을 통해 비동기 작업과 이벤트를 효율적으로 관리할 수 있습니다. BehaviorSubject, PublishSubject, combineLatest, debounceTime, throttleTime 등 다양한 RxDart의 기능을 활용하여 복잡한 비동기 작업을 간편하게 처리할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 RxDart를 효과적으로 사용해보세요. RxDart를 통해 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다.