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

22 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 Provider 패키지를 사용하여 로그인 처리를 구현하는 방법에 대해 알아보겠습니다.

Provider란 무엇인가요?

Provider는 Flutter 앱의 상태 관리를 단순하고 직관적으로 만들어주는 패키지입니다. 이를 활용하면 상태 관리 코드를 간소화하고, 여러 위젯에서 상태를 공유할 수 있습니다.

로그인 상태 관리하기

첫 번째로, provider 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그 다음, ChangeNotifier 클래스를 작성하여 로그인 상태를 관리합니다. 이 클래스는 사용자의 로그인 상태를 추적하고 변경사항을 알릴 수 있도록 합니다.

import 'package:flutter/foundation.dart';

class AuthProvider with ChangeNotifier {
  bool _isLoggedIn = false;

  bool get isLoggedIn => _isLoggedIn;

  void login() {
    _isLoggedIn = true;
    notifyListeners();
  }

  void logout() {
    _isLoggedIn = false;
    notifyListeners();
  }
}

이제, Provider를 사용하여 위에서 만든 AuthProvider를 전역적으로 사용할 수 있도록 만들어줍니다. 이를 위해 main.dart 파일에서 MultiProvider 위젯을 사용합니다.

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

이제 로그인 화면에서 AuthProvider를 사용하여 로그인/로그아웃 상태를 관리할 수 있게 되었습니다. 아래는 간단한 예시입니다.

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final authProvider = Provider.of<AuthProvider>(context);

    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            authProvider.login();
          },
          child: Text('Log In'),
        ),
      ),
    );
  }
}

위와 같이 Provider를 사용하여 로그인 상태를 관리하면, 상태 관리 코드를 간소화하고 효율적으로 관리할 수 있습니다.

이상으로, Provider를 사용하여 Flutter 앱의 로그인 처리를 구현하는 방법에 대해 알아보았습니다. Provider를 사용하면 상태 관리를 보다 쉽게 처리할 수 있으며, 앱의 성능과 유지보수성을 향상시킬 수 있습니다.

참고문헌: Flutter Provider 패키지 문서 Provider - Flutter 패키지 소개 Flutter 공식 문서