본문 바로가기
Flutter/Flutter Programming

플러터에서 로그인 여부에 따라 페이지 라우팅하기

by Maccrey 2024. 5. 31.
반응형

플러터 앱 개발에서 로그인 여부에 따라 페이지 라우팅을 구현하는 것은 매우 중요한 작업입니다. 사용자가 로그인하지 않은 상태에서 로그인이 필요한 페이지에 접근하면 적절한 페이지로 안내하거나 로그인 절차를 안내해야 합니다.

이 블로그 포스에서는 플러터에서 로그인 여부에 따라 페이지 라우팅을 구현하는 두 가지 방법을 소개합니다.

1. Navigator 사용하기

Navigator는 플러터에서 페이지 라우팅을 관리하는 기본 클래스입니다.

로그인 여부에 따라 페이지 라우팅을 구현하려면 다음과 같이 Navigator를 사용할 수 있습니다.

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamBuilder<bool>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.hasData && snapshot.data!) {
            return HomePage();
          } else {
            return LoginPage();
          }
        },
      ),
    );
  }
}
 

위 코드는 FirebaseAuth를 사용하여 사용자 인증 상태를 스트리밍합니다. 사용자가 로그인된 경우 HomePage를 표시하고, 로그인되지 않은 경우 LoginPage를 표시합니다.

2. GetX 사용하기

GetX는 플러터에서 라우팅 및 상태 관리를 간편하게 하는 라우터 및 의존성 관리 라이브러리입니다.

로그인 여부에 따라 페이지 라우팅을 구현하려면 다음과 같이 GetX를 사용할 수 있습니다.

import 'package:get/get.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: StreamBuilder<bool>(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.hasData && snapshot.data!) {
            return HomePage();
          } else {
            return LoginPage();
          }
        },
      ),
    );
  }
}
 

위 코드는 GetX의 GetMaterialApp 위젯을 사용하여 앱을 초기화합니다.

StreamBuilder는 사용자 인증 상태를 스트리밍하고, 로그인 여부에 따라 HomePage 또는 LoginPage를 표시합니다.

결론

플러터에서 로그인 여부에 따라 페이지 라우팅을 구현하는 방법은 여러 가지가 있습니다. 위에서 소개한 두 가지 방법은 가장 일반적인 방법이며, 개발자의 선호와 프로젝트의 요구 사항에 따라 적절한 방법을 선택할 수 있습니다.

로그인 여부에 따라 페이지 라우팅 외에도 플러터 앱에서 사용자 인증을 구현하는 방법에 대한 자세한 내용은 다음 링크를 참조하십시오.

  • 플러터에서 Firebase 인증 사용하기 [유효하지 않은 URL 삭제됨]
  • GetX 공식 문서
 

get | Flutter package

Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.

pub.dev

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

나비일기장 [수발일기장] - Google Play 앱

수형자 수발가족및 수발인을 위한 일기장으로 수형생활시기에 따른 정보를 얻을 수 있습니다.

play.google.com

 

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

 

Tester Share [테스터쉐어] - Google Play 앱

Tester Share로 Google Play 앱 등록을 단순화하세요.

play.google.com

 

반응형