플러터 GetX에서 라우팅 및 네비게이션 완벽 가이드 (초보자용)

Flutter 앱 개발에서 라우팅 및 네비게이션은 사용자가 앱 내에서 원활하게 이동할 수 있도록 하는 중요한 기능입니다.

GetX는 간편하고 강력한 라우팅 및 네비게이션 기능을 제공하여 개발자들이 쉽게 앱 구조를 구축하고 사용자 경험을 향상시킬 수 있도록 도와줍니다.

이 블로그 게시글에서는 Flutter GetX에서 라우팅 및 네비게이션을 사용하는 방법에 대해 초보자가 쉽게 이해할 수 있도록 단계별로 안내합니다.

 

1. GetX 라우팅 기본 개념

 

GetX에서 라우팅은 Get.to() 함수를 사용하여 수행됩니다. 이 함수는 두 가지 주요 매개 변수를 사용합니다.

• Route: 이동할 페이지 또는 위젯을 나타냅니다.
• Arguments: 선택적으로 전달할 수 있는 데이터입니다.

2. 기본 라우팅 예제

import 'package:get/get.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.to(DetailsPage(), arguments: {'id': 1});
          },
          child: Text('Go to Details Page'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final id = Get.arguments?['id'] as int? ?? 0;
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Text('Product ID: $id'),
      ),
    );
  }
}

 

설명

• HomePage에는 DetailsPage로 이동하는 버튼이 있습니다.
• Get.to() 함수를 사용하여 DetailsPage로 이동하고 id라는 이름의 데이터를 전달합니다.
• DetailsPage는 Get.arguments를 사용하여 전달된 데이터에 접근합니다.

3. 라우팅 매개 변수 유형

 

Get.to() 함수는 다양한 유형의 매개 변수를 지원합니다.

• 기본 데이터 유형: int, String, bool, double 등
• Map: 키-값 쌍으로 구성된 데이터
• 커스텀 객체: 직접 정의한 클래스 객체

4. 라우팅 네임 사용

 

GetX는 라우팅 이름을 사용하여 라우팅을 더욱 명확하고 관리하기 쉽게 만들 수 있도록 합니다.

import 'package:get/get.dart';

class Routes {
  static const String home = '/home';
  static const String details = '/details/:id';
}

void main() {
  runApp(GetMaterialApp(
    initialRoute: Routes.home,
    getPages: [
      GetPage(name: Routes.home, page: HomePage()),
      GetPage(name: Routes.details, page: DetailsPage()),
    ],
  ));
}

 

설명

• Routes 클래스에서 라우팅 이름을 상수로 정의합니다.
• main() 함수에서 GetMaterialApp의 initialRoute 속성을 사용하여 시작 라우트를 설정합니다.
• getPages 속성을 사용하여 라우팅 정보를 정의합니다.

5. 라우팅 매개 변수 추출

 

DetailsPage에서 라우팅 이름으로 전달된 매개 변수를 추출하려면 다음과 같이 Get.parameters를 사용합니다.

import 'package:get/get.dart';

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final id = int.parse(Get.parameters['id']!);
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Text('Product ID: $id'),
      ),
    );
  }
}

 

6. 네비게이션 스타일

 

GetX는 다양한 네비게이션 스타일을 제공하여 앱의 디자인과 사용자 경험에 맞는 방식으로 페이지 이동을 구현할 수 있도록 합니다.

• 기본 네비게이션: Get.to() 함수를 사용하여 기본적인 페이지 이동을 수행합니다.
• 다음 페이지: Get.next() 함수를 사용하여 현재 페이지를 다음 페이지로 바꿉니다.
• 뒤로 이동: Get.back() 함수를 사용하여 이전 페이지로 돌아갑니다.
• 모든 페이지 제거: Get.offAll() 함수를 사용하여 이전 페이지를 모두 제거하고 새로운 페이지로 이동합니다.
• 다이얼로그: Get.dialog() 함수를 사용하여 다이얼로그를 표시합니다.
• 바텀 시트: Get.bottomSheet() 함수를 사용하여 바텀 시트를 표시합니다.
• 스낵바: Get.snackbar() 함수를 사용하여 스낵바를 표시합니다.

7. 네비게이션 전환 효과

 

GetX는 다양한 네비게이션 전환 효과를 제공하여 페이지 이동 시 시각적 효과를 추가할 수 있도록 합니다.

• 기본: 기본적인 전환 효과를 사용합니다.
• 페이드: 페이지가 사라지고 나타나는 듯한 효과를 사용합니다.
• 슬라이드: 페이지가 옆으로 밀려오고 나가는 듯한 효과를 사용합니다.
• 커스텀: 직접 정의한 전환 효과를 사용합니다.

8. 네비게이션 가드

 

GetX는 네비게이션 가드를 사용하여 특정 조건 충족 시에만 페이지 이동을 허용하도록 설정할 수 있습니다.

import 'package:get/get.dart';

class AuthGuard extends GetMiddleware {
  @override
  bool onRoutePredicate(RouteSettings route) {
    final isLoggedIn = AuthService.isLoggedIn();
    if (!isLoggedIn) {
      Get.offAllNamed('/login');
      return false;
    }
    return true;
  }
}

 

설명

• AuthGuard 클래스는 GetMiddleware를 상속하여 네비게이션 가드 역할을 수행합니다.
• onRoutePredicate 메서드는 페이지 이동 전에 호출되며, 사용자가 로그인되어 있는지 확인합니다.
• 로그인되어 있지 않으면 로그인 페이지로 이동하고 페이지 이동을 취소합니다.

9. 네비게이션 스택 관리

 

GetX는 네비게이션 스택을 사용하여 사용자가 방문한 페이지 목록을 관리합니다.

• Get.currentRoute: 현재 페이지의 라우트 이름을 가져옵니다.
• Get.previousRoute: 이전 페이지의 라우트 이름을 가져옵니다.
• Get.history: 방문한 페이지 목록을 가져옵니다.

10. 추가 정보

• GetX 공식 문서: https://github.com/jonataslaw/getx
• GetX 라우팅 및 네비게이션 문서: https://github.com/topics/flutter-getx
• GetX 예제: https://github.com/jonataslaw/getx

11. 결론

 

GetX는 Flutter에서 라우팅 및 네비게이션을 간편하고 효율적으로 구현할 수 있도록 강력한 기능을 제공합니다. 초보자라도 쉽게 이해하고 사용할 수 있으며, 다양한 기능을 통해 앱의 디자인과 사용자 경험을 향상시킬 수 있습니다.

이 블로그 게시글을 통해 Flutter GetX에서 라우팅 및 네비게이션을 사용하는 방법에 대한 기본적인 개념을 이해하셨기를 바랍니다.

더 궁금한 점이나 알아보고 싶은 기능이 있다면 언제든지 댓글 남겨주세요!

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release