[flutter] 플러터 프로바이더를 사용하여 로그아웃 처리하기

22 Dec 2023

flutter

플러터 앱을 개발하는 경우, 로그인 상태와 로그아웃 처리는 중요한 부분입니다. 이러한 기능을 보다 쉽게 관리하고 구현하기 위해서 프로바이더(Provider) 패키지를 사용할 수 있습니다. 프로바이더를 활용하여 효과적으로 로그아웃 처리를 구현하는 방법을 살펴보겠습니다.

1. 프로바이더 패키지 추가

먼저, pubspec.yaml 파일에 다음과 같이 provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

이후 터미널에서 flutter pub get 명령어를 사용하여 패키지를 가져옵니다.

2. 로그아웃 처리 메서드 추가

다음으로, 프로바이더를 사용하여 로그아웃 처리 메서드를 추가합니다.

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

class AuthProvider with ChangeNotifier {
  bool _isLoggedIn = false;

  bool get isLoggedIn => _isLoggedIn;

  // 로그인 상태 업데이트
  void updateLoginStatus(bool status) {
    _isLoggedIn = status;
    notifyListeners();
  }

  // 로그아웃 처리
  void logout() {
    _isLoggedIn = false;
    // 추가적인 로그아웃 관련 작업 수행
    notifyListeners();
  }
}

3. 메인 앱에서 프로바이더 사용

이제, 메인 앱에서 프로바이더를 사용하여 로그아웃 처리를 구현합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'auth_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => AuthProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Consumer<AuthProvider>(
        builder: (context, authProvider, child) {
          return authProvider.isLoggedIn ? LoggedInScreen() : LoginScreen();
        },
      ),
    );
  }
}

class LoggedInScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Logged In'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 로그아웃 처리
            Provider.of<AuthProvider>(context, listen: false).logout();
          },
          child: Text('Logout'),
        ),
      ),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 로그인 처리
            Provider.of<AuthProvider>(context, listen: false).updateLoginStatus(true);
          },
          child: Text('Login'),
        ),
      ),
    );
  }
}

마치며

프로바이더를 사용하여 로그아웃 처리를 구현하는 것은 매우 간단합니다. 프로바이더를 사용하면 전역적인 상태 관리 및 상태 변경 감지가 쉬워지므로, 로그인 및 로그아웃과 같은 기능을 효과적으로 처리할 수 있습니다. 만약 여러분이 플러터 프로젝트에서 로그아웃 처리를 구현하려고 한다면, 프로바이더 패키지를 활용하는 것을 고려해보세요.

참고: 플러터 프로바이더 공식 문서