Flutter router 사용기

tzoyk·2021년 7월 27일

flutter

목록 보기
6/14

라우터 클래스는 메테리얼 앱에 주입하려고 사용한다

Class Routes
서브루틴:
route선언
onGenerateRoute 선언, 인자값 RouteSettings settings
onUnknownRoute 선언, 인자값 RouteSettings settings

sendNavigationEventToFirebase() { } 를 선언해서 Firebase 통계도 내는데에도 주입할 수 있다

이 함수 들 중에서 어려운 부분이
onGenerateRoute() { }인데
인자값으로 RouteSettings settings를 사용한다.
이것은 flutter/material에서 선언된 데이터타입인듯 하다.
Settings 라는 이름같지 않게 이를 파싱하면 페이지 이름과 데이터들이 들어있다.
파싱된 값을 pathElements[1] 에 주입하고
이를 switch case함수의 파라미터로 주입한다.

case "WelcomePage":return CustomRoute<bool>(builder:(BuildContext context)=> WelcomePage()); 

스테이트를 주입할 수도 있다.

case "CreateFeedPage": return CustomRoute<bool>(builder:(BuildContext context)=> ChangeNotifierProvider<ComposeTweetState>(
         create: (_) => ComposeTweetState(),
         child: ComposeTweetPage(isRetweet:false, isTweet: true),
       ));

또한 인자값들이 여러가지 일때에는

case "ComposeTweetPage": 
        bool isRetweet = false;
        bool isTweet = false;
        if(pathElements.length == 3 && pathElements[2].contains('retweet')){
          isRetweet = true;
        }
        else if(pathElements.length == 3 && pathElements[2].contains('tweet')){
          isTweet = true;
        }
        return CustomRoute<bool>(builder:(BuildContext context)=> ChangeNotifierProvider<ComposeTweetState>(
          create: (_) => ComposeTweetState(),
          child: ComposeTweetPage(isRetweet:isRetweet, isTweet: isTweet),
        ));

MaterialApp의 routes 부분에서 Routes.route()를 대입해주면 된다.
routes: Routes.route()

each example

class Route{
	static dynamic route() {
    		return {
        		'/': (BuildContext context) => SplashPage(),
            }
       };
   
static Route onGenerateRoute(RouteSettings settings) {
     final List<String> pathElements = settings.name.split('/');
     if (pathElements[0] != '' || pathElements.length == 1) {
       return null;
     }
     switch (pathElements[1]) {
      case "ComposeTweetPage": 
        bool isRetweet = false;
        bool isTweet = false;
        if(pathElements.length == 3 && pathElements[2].contains('retweet')){
          isRetweet = true;
        }
        else if(pathElements.length == 3 && pathElements[2].contains('tweet')){
          isTweet = true;
        }
        return CustomRoute<bool>(builder:(BuildContext context)=> ChangeNotifierProvider<ComposeTweetState>(
          create: (_) => ComposeTweetState(),
          child: ComposeTweetPage(isRetweet:isRetweet, isTweet: isTweet),
        ));
      case "FeedPostDetail":
        var postId = pathElements[2];
          return SlideLeftRoute<bool>(builder:(BuildContext context)=> FeedPostDetail(postId: postId,),settings: RouteSettings(name:'FeedPostDetail'));
        case "ProfilePage":
         String profileId;
         if(pathElements.length > 2){
             profileId = pathElements[2];
         }
        return CustomRoute<bool>(builder:(BuildContext context)=> ProfilePage(
          profileId: profileId,
        )); 
      case "CreateFeedPage": return CustomRoute<bool>(builder:(BuildContext context)=> ChangeNotifierProvider<ComposeTweetState>(
          create: (_) => ComposeTweetState(),
          child: ComposeTweetPage(isRetweet:false, isTweet: true),
        ));
       case "ChatScreenPage": return CustomRoute<bool>(builder:(BuildContext context)=> ChangeNotifierProvider<ChatState>(
          create: (_) => ChatState(),
          child: ChatScreenPage(),
        ));
      case "WelcomePage":return CustomRoute<bool>(builder:(BuildContext context)=> WelcomePage()); 
      case "SignIn":return CustomRoute<bool>(builder:(BuildContext context)=> SignIn()); 
      case "SignUp":return CustomRoute<bool>(builder:(BuildContext context)=> Signup()); 
      case "ForgetPasswordPage":return CustomRoute<bool>(builder:(BuildContext context)=> ForgetPasswordPage()); 
      case "SearchPage":return CustomRoute<bool>(builder:(BuildContext context)=> SearchPage()); 
      case "ImageViewPage":return CustomRoute<bool>(builder:(BuildContext context)=> ImageViewPge());
      case "EditProfile":return CustomRoute<bool>(builder:(BuildContext context)=> EditProfilePage()); 
      case "ProfileImageView":return SlideLeftRoute<bool>(builder:(BuildContext context)=> ProfileImageView()); 
      case "NewMessagePage":return CustomRoute<bool>(builder:(BuildContext context)=> NewMessagePage(),); 
      case "SettingsAndPrivacyPage":return CustomRoute<bool>(builder:(BuildContext context)=> SettingsAndPrivacyPage(),); 
      case "AccountSettingsPage":return CustomRoute<bool>(builder:(BuildContext context)=> AccountSettingsPage(),); 
      case "AccountSettingsPage":return CustomRoute<bool>(builder:(BuildContext context)=> AccountSettingsPage(),); 
      case "PrivacyAndSaftyPage":return CustomRoute<bool>(builder:(BuildContext context)=> PrivacyAndSaftyPage(),); 
      case "NotificationPage":return CustomRoute<bool>(builder:(BuildContext context)=> NotificationPage(),); 
      case "ContentPrefrencePage":return CustomRoute<bool>(builder:(BuildContext context)=> ContentPrefrencePage(),); 
      case "DisplayAndSoundPage":return CustomRoute<bool>(builder:(BuildContext context)=> DisplayAndSoundPage(),); 
      case "DataUsagePage":return CustomRoute<bool>(builder:(BuildContext context)=> DataUsagePage(),); 
      case "FollowingListPage":return CustomRoute<bool>(builder:(BuildContext context)=> FollowingListPage(),); 
      case "FollowerListPage":return CustomRoute<bool>(builder:(BuildContext context)=> FollowerListPage(),); 
      case "VerifyEmailPage":return CustomRoute<bool>(builder:(BuildContext context)=> VerifyEmailPage(),); 
      default:return onUnknownRoute(RouteSettings(name: '/Feature'));
     }
  }
profile
데이터

0개의 댓글