[flutter] 플러터 RxDart 기반 프로젝트 예시

05 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter)와 RxDart를 결합하여 어떻게 프로젝트를 구축할 수 있는지 살펴보겠습니다. RxDart는 Dart 언어의 반응형 프로그래밍을 지원하는 라이브러리로, 비동기 작업 및 데이터 흐름을 효과적으로 다룰 수 있습니다.

프로젝트 설정과 의존성 추가하기

먼저, 기존 플러터 프로젝트에 RxDart 의존성을 추가해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 의존성을 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.27.2

의존성을 추가한 후, 패키지를 업데이트합니다.

RxDart를 활용한 예시

이제 RxDart를 사용하여 프로젝트를 구축할 수 있습니다. 예를 들어, 사용자의 이름을 입력 받고 입력한 이름을 실시간으로 반영하는 간단한 예시를 작성해보겠습니다.

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

class HelloWorldScreen extends StatefulWidget {
  @override
  _HelloWorldScreenState createState() => _HelloWorldScreenState();
}

class _HelloWorldScreenState extends State<HelloWorldScreen> {
  final TextEditingController _nameController = TextEditingController();
  final BehaviorSubject<String> _nameSubject = BehaviorSubject<String>();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
      ),
      body: Column(
        children: [
          TextField(
            controller: _nameController,
            onChanged: (value) {
              _nameSubject.add(value);
            },
            decoration: InputDecoration(
              hintText: '이름을 입력하세요',
            ),
          ),
          SizedBox(height: 16),
          StreamBuilder<String>(
            stream: _nameSubject.stream,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text('안녕하세요, ${snapshot.data}님!');
              }
              return Text('이름을 입력해주세요.');
            },
          ),
        ],
      ),
    );
  }
}

위의 코드는 간단한 화면을 구성하여 사용자 입력을 받고, 입력한 이름을 실시간으로 반영하는 예시입니다. TextEditingController는 사용자의 입력 값을 가져오기 위해 사용되며, BehaviorSubject는 입력 값을 구독하고 변경 사항을 알립니다.

결론

이를 통해 플러터 RxDart 기반의 프로젝트를 작성하는 예시를 살펴보았습니다. RxDart를 사용하면 비동기 작업과 데이터 흐름을 효과적으로 관리할 수 있으며, 반응형 프로그래밍의 장점을 활용할 수 있습니다.

더 많은 RxDart의 기능을 사용하고 싶다면 RxDart 공식 문서를 참조하세요.