[flutter] 플러터 Riverpod와 로그인 상태 유지 방법

로그인 상태를 유지하기 위해 앱 상태 관리는 매우 중요합니다. Riverpod는 플러터에서 상태 관리를 하는 라이브러리 중 하나로, 로그인 상태를 유지하는데에도 효과적으로 사용할 수 있습니다. 이번 블로그 포스트에서는 Riverpod를 사용하여 로그인 상태를 유지하는 방법을 알아보겠습니다.

1. Riverpod 설치하기

먼저, 프로젝트에 Riverpod를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.3

설치가 완료되었다면, 프로젝트를 업데이트해줍니다.

$ flutter pub get

2. AuthProvider 생성하기

로그인 상태를 유지하기 위해 AuthProvider라는 Riverpod 프로바이더(provider)를 생성해야 합니다. main.dart 파일에 다음과 같이 추가해주세요.

final authProvider = Provider<Auth>((ref) {
  return Auth();
});

class Auth {
  bool isLoggedIn = false;
  
  Future<void> login() async {
    // 로그인 처리 로직
    // ...
    isLoggedIn = true;
  }
  
  Future<void> logout() async {
    // 로그아웃 처리 로직
    // ...
    isLoggedIn = false;
  }
}

위의 코드에서 AuthProviderAuth 클래스의 인스턴스를 제공하는 Riverpod 프로바이더입니다. Auth 클래스에는 isLoggedIn이라는 상태와 로그인 및 로그아웃 처리 로직이 포함되어 있습니다. 로그인 및 로그아웃 처리 로직은 실제 앱에 맞게 구현하셔야 합니다.

3. 로그인 상태 확인하기

로그인 상태를 확인하기 위해 LoginScreen 위젯을 만들어보겠습니다.

class LoginScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final auth = watch(authProvider);
    
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              auth.isLoggedIn ? '로그인 상태입니다!' : '로그인 해주세요.',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => auth.isLoggedIn ? auth.logout() : auth.login(),
              child: Text(auth.isLoggedIn ? '로그아웃' : '로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 ConsumerWidget을 상속받은 LoginScreen 위젯이 있습니다. ScopedReaderauthProvider를 가져와 auth 변수에 할당합니다. 그리고 auth.isLoggedIn을 통해 로그인 상태를 확인하고, 로그인과 로그아웃 버튼을 제공합니다.

4. 로그인 상태 유지하기

로그인 상태를 유지하기 위해 main.dart에서 ProviderContainer를 사용합니다.

void main() {
  runApp(ProviderScope(child: MyApp()));
}

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

위의 코드에서 ProviderScopeMyApp을 감싸주고, ProviderContainer를 제공합니다. 이렇게 하면 AuthProvider의 상태를 유지할 수 있습니다.

결론

이제 플러터 Riverpod를 사용하여 로그인 상태를 유지하는 방법에 대해 알아보았습니다. Riverpod는 강력하면서도 간편한 상태 관리 라이브러리입니다. 로그인 상태 외에도 다른 상태를 관리할 때도 유용하게 사용할 수 있으니, 앱 개발에 활용해보시기 바랍니다.

참고 자료