Custom Route 정의하기

앱 화면 전환(이동) 위한 Custom Route를 정의합니다.

routes.dart 작성

아래와 같이 route를 작성하고 관리합니다.

routes.dart
import 'package:flutter/material.dart';
import '페이지 경우';

const String #페이지#Route = "login";

class CustomRouter {
  static Route<dynamic> generatedRoute(RouteSettings settings) {
    switch (settings.name) {
      case #페이지#Route:
        return MaterialPageRoute(builder: (_) => #페이지#Page());
      
      # 페이지 이동 시 파라미터를 넘길 경우 
      case #페이지#Route:
        return MaterialPageRoute(
            builder: (_) => #페이지#Page(
                  pageType: settings.arguments,
                ));
    }
  }
}

lib Root 경로에 routes.dart파일을 생성하고 관리합니다.

routes.dart 예:

routes.dart
import 'package:flutter/material.dart';
import 'screens/login/login.dart';
import 'screens/home/home.dart';

class CustomRouter {
  static const String loginRoute = "login";
  static const String homeRoute = "home";

  static Route<dynamic> generatedRoute(RouteSettings settings) {
    switch (settings.name) {
      case loginRoute:
        return MaterialPageRoute(builder: (_) => LoginPage());
      case homeRoute:
        return MaterialPageRoute(builder: (_) => HomePage());
      case ReaderRoute:
        return MaterialPageRoute(
            builder: (_) => ReaderPage(
                  screenArguments: settings.arguments,
                ));
    }
  }
}

MyApp MaterialApp Route 추가

lib/main.dart
import 'routes.dart';

@override
Widget build(BuildContext context) {
    if (checkLogin) {
      initialRoute = homeRoute;
    } else {
      initialRoute = loginRoute;
    }
    return MaterialApp(
    .....
    .....
    onGenerateRoute: CustomRouter.generatedRoute,
    initialRoute: initialRoute, // loginRoute or homeRoute,
    );
}

사용방법

Flutter 스크 전환하기 :

// 위젯의 콜백
onPressed: () {
  // Named route를 사용하여 화면으로 전환합니다.
  Navigator.popAndPushNamed(context, homeRoute);
}

Flutter 이전 스크으로 돌아가기 :

onPressed: () {
  // 현재 route를 스택에서 제거함으로써 이 스크린으로 되돌아 갑니다.
  Navigator.pop(context);
}

Last updated

Was this helpful?