Flutter 앱의 동적 홈 경로

일부 인증 논리를 기반으로 Flutter 앱에서 사용자에게 표시할 홈페이지를 동적으로 결정합니다.

You can also read this article directly on RavSam’s blog. We publish our articles on Medium after a week.

모든 프로덕션 앱에서 사용자는 앱이 열릴 때마다 일부 인증 논리에 따라 경로로 이동합니다. Flutter 앱에는 로그인과 대시보드라는 두 가지 이상의 경로가 있습니다. 문제는 사용자를 리디렉션할 경로를 어떻게 결정할 수 있습니까?

이 앱에서는 로컬에 저장된 부울 변수의 값을 확인하여 홈 경로를 동적으로 결정합니다. API 토큰의 유효성을 확인하는 것과 같이 인증 논리를 작성하는 방법은 무엇이든 사용할 수 있지만 단순화를 위해 간단한 논리를 살펴보겠습니다.

Flutter 동적 홈 경로 흐름도

내용물

1. 종속성 설치

2. 코드 작성

결과

1. 종속성 설치

pubspec.yaml에서 Flutter 애플리케이션에서 사용할 다음 종속성을 추가하겠습니다.

dependencies:
  shared_preferences: ^0.5.12+4
  async: ^2.4.2

Make sure to install the latest version of the dependencies.

Shared Preferences 로컬 저장소에 간단한 키-값 쌍을 읽고 쓰기 위한 간단한 Flutter 플러그인입니다. Async dart:async 라이브러리와 관련된 유틸리티 함수 및 클래스를 포함합니다.

이러한 종속성을 추가한 후에는 이제 설치할 차례입니다. 터미널에서 다음 명령을 실행해 보겠습니다.

flutter pub get

2. 코드 작성

main.dart에 다음 코드를 추가해 보겠습니다.

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

void main() async {
  // handle exceptions caused by making main async
  WidgetsFlutterBinding.ensureInitialized();

  // init a shared preferences variable
  SharedPreferences prefs = await SharedPreferences.getInstance();

  // get the locally stored boolean variable
  bool isLoggedIn = prefs.getBoolean('is_logged_in');

  // define the initial route based on whether the user is logged in or not
  String initialRoute = isLoggedIn ? '/' : 'login';

  // create a flutter material app as usual
  Widget app = MaterialApp(
    ...
    initialRoute: initialRoute,
  );

  // mount and run the flutter app
  runApp(app);
}

코드는 매우 자명합니다. 우리가 하는 일은 is_logged_in 부울 변수의 값을 가져온 다음 Flutter Material App에서 initialRoute의 값을 결정하는 것뿐입니다.

위 코드에서 한 가지 중요한 점은 async-await 패턴을 사용한다는 것입니다. then을 사용할 수도 있지만 코드가 약간 지저분해지기 때문에 여기서는 피하려고 합니다. main() 함수를 비동기식으로 만들면 일부 예외가 발생할 수 있으므로 이를 해결하려면 WidgetsFlutterBinding.ensureInitialized()를 추가해야 합니다.

결과

그게 다야. 사용자가 로그인한 경우 대시보드 페이지로, 그렇지 않은 경우 로그인 페이지로 리디렉션할 수 있는 코드를 성공적으로 작성했습니다. 우리 팀에 대한 의심이나 감사가 있으면 아래 의견에 알려주십시오.

RavSam 웹 솔루션 정보

우리는 회사와 신생 기업이 웹 및 모바일 앱을 JAMstack 아키텍처로 마이그레이션하도록 돕고 있습니다. Reach out to us 우리의 서비스, 가격 또는 기타 사항에 대해 자세히 알기 위해.

당신은 또한 독서를 즐길 수 있습니다

Why Flutter Developer could be a $1Mn job?

Top Flutter plugins to take your app to next level