[flutter] 플러터 Riverpod를 이용한 로그인 처리 구현 방법

30 Nov 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 Riverpod를 사용하여 로그인 처리를 어떻게 구현하는지 살펴보겠습니다. Riverpod는 플러터의 상태 관리를 위한 강력한 패키지로, 의존성 주입과 상태 관리가 간단하고 효율적으로 이루어질 수 있도록 도와줍니다.

1. Riverpod 설치하기

우선, 프로젝트에 Riverpod 패키지를 추가해야 합니다. pubspec.yaml 파일에서 dependencies 섹션에 다음과 같이 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0+3

그리고 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

2. 로그인 상태 관리하기

StateNotifierProvider를 사용하여 현재 로그인 상태를 관리하는 클래스를 만들어보겠습니다. 이 클래스는 로그인 상태를 변경하고 상태를 감지하는 기능을 제공합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

class AuthNotifier extends StateNotifier<bool> {
  AuthNotifier() : super(false);

  void login() {
    state = true;
  }
  
  void logout() {
    state = false;
  }
}

3. 로그인 UI 구현하기

로그인 UI를 구현하기 위해 스크린 위젯에서 Riverpod를 사용하여 AuthNotifier 객체를 의존성 주입해야 합니다. 이를 위해 ProviderScope 위젯을 앱 위젯의 상위에 추가하고, 필요한 곳에서 useProvider 훅을 사용하여 AuthNotifier를 가져올 수 있습니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final authNotifier = useProvider(authNotifierProvider);

    return Scaffold(
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            return authNotifier.state ? _buildLoggedInUI() : _buildLoginForm();
          },
        ),
      ),
    );
  }

  Widget _buildLoggedInUI() {
    return Text('로그인 성공!');
  }

  Widget _buildLoginForm() {
    // 로그인 폼 UI 구현
  }
}

4. 로그인 처리

이제 실제로 로그인 처리를 구현해보겠습니다. 로그인 버튼을 누르면 AuthNotifier의 login 메서드를 호출하여 로그인 상태를 변경합니다.

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final authNotifier = useProvider(authNotifierProvider);

    return Scaffold(
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            return authNotifier.state ? _buildLoggedInUI() : _buildLoginForm();
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          authNotifier.login();
        },
        child: Icon(Icons.login),
      ),
    );
  }

  // ...
}

5. 로그아웃 처리

로그아웃 처리도 마찬가지로 AuthNotifier의 logout 메서드를 호출하여 상태를 변경합니다.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final authNotifier = useProvider(authNotifierProvider);

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('홈 화면'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                authNotifier.logout();
              },
              child: Text('로그아웃'),
            ),
          ],
        ),
      ),
    );
  }
}

마무리

이번 포스트에서는 플러터 앱에서 Riverpod를 사용하여 로그인 처리를 구현하는 방법을 알아보았습니다. Riverpod를 사용하면 효율적이고 간단하게 상태 관리를 할 수 있으며, 의존성 주입을 통해 앱의 확장성과 유지보수성을 높일 수 있습니다. 더 많은 기능과 사용법을 알아보려면 Riverpod 공식 문서를 참고해보세요.

참고 자료:

Riverpod 공식 문서