Flutter 앱의 동적 홈 경로

5290 단어 mobileappsflutter

일부 인증 논리를 기반으로 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
  • 좋은 웹페이지 즐겨찾기