[flutter] 플러터 RxDart에서의 소셜 로그인 기능 처리 방법

05 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 RxDart를 사용하여 소셜 로그인 기능을 어떻게 처리하는지 알아보겠습니다. RxDart는 리액티브 프로그래밍 패턴을 제공하여 비동기 이벤트들을 더욱 용이하게 처리할 수 있게 도와줍니다.

1. RxDart 라이브러리 추가하기

먼저, 프로젝트의 pubspec.yaml 파일에 RxDart 의존성을 추가해야 합니다.

dependencies:
  rxdart: ^0.27.2

패키지를 추가한 후 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받습니다.

2. 소셜 로그인 버튼 생성하기

로그인 화면에 소셜 로그인 버튼을 추가해야 합니다. 예를 들어, 구글 로그인을 지원하기 위해 구글 로그인 버튼을 생성하도록 할게요.

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                onPressed: () {
                  // TODO: 구글 로그인 처리
                },
                child: Text('Google Login'),
              ),
              // 다른 소셜 로그인 버튼들도 추가할 수 있습니다.
            ],
          ),
        ));
  }
}

이제 구글 로그인 버튼이 화면에 표시됩니다.

3. RxDart를 이용하여 로그인 이벤트 처리하기

RxDart의 PublishSubject를 사용하여 소셜 로그인 이벤트를 처리할 수 있습니다. PublishSubject는 스트림을 생성하고 이벤트를 방출하는 데 사용되며, 구독자들이 이벤트를 받을 수 있습니다.

import 'package:rxdart/rxdart.dart';

class LoginPage extends StatelessWidget {
  final PublishSubject<bool> _googleLoginSubject = PublishSubject();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                onPressed: () {
                  _googleLoginSubject.add(true);
                },
                child: Text('Google Login'),
              ),
              // 다른 소셜 로그인 버튼들도 추가할 수 있습니다.
            ],
          ),
        ));
  }
}

_googleLoginSubject라는 PublishSubject를 선언하고, 구글 로그인 버튼이 클릭되면 이벤트를 해당 Subject에 추가하도록 합니다.

4. 로그인 이벤트 처리하기

이제 Subject에 추가된 이벤트를 구독하여 로그인을 처리할 수 있습니다.

import 'package:rxdart/rxdart.dart';

class LoginPage extends StatelessWidget {
  final PublishSubject<bool> _googleLoginSubject = PublishSubject();

  LoginPage() {
    _googleLoginSubject.stream.listen((event) {
      if (event) {
        // TODO: 구글 로그인 처리
        // 로그인 성공 시, 다음 화면으로 이동
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                onPressed: () {
                  _googleLoginSubject.add(true);
                },
                child: Text('Google Login'),
              ),
              // 다른 소셜 로그인 버튼들도 추가할 수 있습니다.
            ],
          ),
        ));
  }
}

Subject의 stream을 구독하여 이벤트를 받고, 이벤트에 따른 처리를 해주면 됩니다. 여기서는 구글 로그인을 처리하는 로직을 추가해주면 됩니다.

결론

이렇게 Flutter 앱에서 RxDart를 사용하여 소셜 로그인 기능을 처리하는 방법을 알아봤습니다. RxDart를 사용하면 비동기 이벤트 처리가 더 편리하게 이루어질 수 있으며, 더욱 빠르고 효율적인 앱을 개발할 수 있습니다.