3

Getx Pages

• 앱 내에서 사용할 페이지를 미리 등록해놓고, URL 방식으로 활용
• 기존의 네비게이션

Get.to(()=>MainPage())
Get.to(()=>LoginPage())
Get.to(()=>SignUpPage())
Get.to(()=>ErrorPage())

• URL 방식의 네비게이션

Get.toNamed('/');
Get.toNamed('/login');
Get.toNamed('/signup');
Get.toNamed('/error');

• 위와 같이 URL 라우팅 방식으로 사용하려면, GetMaterialApp에 미리 등록해놓아야함.

 class LoginPage extends StatelessWidget {
  const LoginPage({super.key});
  
  static const String route = '/login'

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

GetMaterialApp(
    ...
    getPages: [
      GetPage(name: LoginPage.route, page: () => LoginPage()),
      GetPage(name: '/main', page: () => MainPage()),
      GetPage(name: '/signup', page: () => SignUpPage()),
    ]
)

• 그 다음, 원하는 곳에서는 다음과 같이 활용

Text(
   onPressed: (){
      Get.toNamed(LoginPage.route);
      //새로운 페이지로 가겠다! (돌아오기 버튼이 있음.)
      Get.offAndToNamed(LoginPage.route);
      //현재 페이지를 종료하고 새로운 페이지로 가겠다는 뜻!
   }
   child: Text('로그인 하기');
)

효과적으로 코딩하기

• GetPages들을 따로 관리하기
  1. 첫번째 방법
  • lib/util/pages.dart

    class AppPages{
      static final pages = [
       GetPage(name: LoginPage.route, page: () => LoginPage()),
        GetPage(name: MainPage.route, page: () => MainPage()),
        GetPage(name: SignUpPage.route, page: () => SignUpPage()),
      ]
    }

  • lib/main.dart

    GetMaterialApp(
       ...
       getPages: AppPages.pages
    )

  • lib/util/routes.dart

    class AppRoutes{
      static const login = LoginPage.route;
      static const main = MainPage.route;
      static const signup = SignUpPage.route;
    }

  • lib/util/pages.dart

    class AppPages{
      static final pages = [
        GetPage(name: AppRoutes.login, page: () => LoginPage()),
        GetPage(name: AppRoutes.main, page: () => MainPage()),
        GetPage(name: AppRoutes.signup, page: () => SignUpPage()),
      ]
    }

  • lib/main.dart

    GetMaterialApp(
       ...
       getPages: AppPages.pages
    )