플러터 GetX에서 라우팅 및 네비게이션 상세 완벽 가이드

GetX는 강력한 라우팅 및 네비게이션 시스템을 제공하여 플러터 앱의 네비게이션을 관리합니다. 이 가이드에서는 GetX를 사용하여 라우팅 및 네비게이션을 설정하는 방법에 대해 설명하겠습니다.

1. GetX 패키지 추가

우선 GetX 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음을 추가합니다

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4 # GetX 패키지 추가

그런 다음 패키지를 설치합니다

flutter pub get

2. 라우트 정의

앱 내의 각 화면에 대한 라우트를 정의해야 합니다. GetX의 GetMaterialApp 위젯을 사용하여 앱을 래핑하고 GetPage를 사용하여 라우트를 정의할 수 있습니다

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:my_app/screens/home_screen.dart';
import 'package:my_app/screens/detail_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'My App',
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => HomeScreen()),
        GetPage(name: '/detail', page: () => DetailScreen()),
      ],
    );
  }
}

3. 네비게이션

화면 간 이동은 Get.to() 또는 Get.off()와 같은 GetX 네비게이션 메서드를 사용하여 수행할 수 있습니다. 다음은 두 가지 메서드의 차이점입니다:

• Get.to()는 새로운 화면을 스택에 추가합니다.
• Get.off()는 현재 화면을 제거하고 새로운 화면을 표시합니다.

예를 들어

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // '/detail' 라우트로 이동
            Get.toNamed('/detail');
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

4. 파라미터 전달

라우트 간에 파라미터를 전달해야 하는 경우 GetX를 사용하여 매개변수를 전달할 수 있습니다. 이를 위해 Get.arguments를 사용합니다. 예를 들어

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String message = Get.arguments ?? 'No message';

    return Scaffold(
      appBar: AppBar(title: Text('Detail')),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

전달할 데이터와 함께 Get.toNamed()를 사용하여 네비게이션합니다

ElevatedButton(
  onPressed: () {
    Get.toNamed('/detail', arguments: 'Hello from Home');
  },
  child: Text('Go to Detail with Message'),
),

이제 GetX를 사용하여 라우팅 및 네비게이션을 설정하는 방법을 알게 되었습니다.

GetX를 사용하면 앱의 네비게이션을 간단하고 효율적으로 관리할 수 있습니다.

 

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

 

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

나비일기장 [수발일기장] - Google Play 앱

 

 

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

 

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

Tester Share [테스터쉐어] - Google Play 앱