[Flutter] GetX ④ - Route Management

get | Flutter Package

 

설정

pubspec.yaml

dependencies:
  get: ^4.6.5

 

main.dart

• MaterialApp 을 GetMaterialApp 으로 변경해주세요.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  	
    // MaterialApp 을 GetMaterialApp 으로 변경
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SampleScreen(),
    );
  }
}

 

 

 

Route Management

 

Route 정의

• MaterialApp 의 routes 처럼 getPages 를 통해 정의할 수 있습니다.
• 인자는 List<GetPage> 를 받습니다.

GetMaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  getPages: [
    GetPage(name: '/first', page: () => FirstScreen()),
    GetPage(name: '/second', page: () => SecondScreen())
  ],
  initialRoute: '/first',
);

 

 

Get.previousRoute

• 이전 라우트가 어떤건지 알 수 있습니다.

Get.previousRoute

 

 

Get.to, Get.toNamed

• 페이지를 이동합니다.
• navigator.push, Navigator.pushNamed 와 같습니다.

// normal
Navigator.push(
   context,
   MaterialPageRoute(
      builder: (context) => SecondScreen(),
   ),
);

// GetX
Get.to(SecondScreen());


// normal
Navigator.pushNamed(context, '/second');

// GetX
Get.toNamed('/second');

 

 

Get.back

• 현재 페이지를 닫습니다.
• Navigator.pop 과 같습니다.

// normal
Navigator.pop(context);

// GetX
Get.back();

 

 

Get.off, Get.offNamed

• 현재 화면을 제거하고, 새로운 화면을 추가합니다
• Navigator.pushReplacement, Navigator.pushReplacementNamed 와 같습니다.

// normal
Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) => SecondScreen(),
    ));
    
// GetX
Get.off(SecondScreen());


// normal
Navigator.pushReplacementNamed(context, '/first');

// GetX
Get.offNamed('/first');

 

 

Get.offAndToNamed

• 화면을 추가한 후, 이전 화면을 제거합니다
• Navigator.popAndPushNamed 와 같습니다.

// normal
Navigator.popAndPushNamed(context, '/second');


// GetX
Get.offAndToNamed('/second');

 

 

Get.offAll, Get.offAllNamed

• 모든 화면을 제거한 후, 새로운 화면을 추가합니다.
• pushAndRemoveUntil, pushNamedAndRemoveUntil 와 같습니다.

// normal
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(),
  ),
      (route) => false,
);

// GetX
Get.offAll(SecondScreen());


// normal
Navigator.pushNamedAndRemoveUntil(
  context,
  '/first',
  (route) => false,
);


// GetX
Get.offAllNamed('/second');

 

 

Argument 전달 방법

argument 속성을 통해서 넘겨주고

Get.to(SecondScreen(), arguments: 'argument');

 

Get.arguments 로 받습니다.

Get.arguments

 

파라미터 형식으로 넘겨주고 받을 수 있습니다.

getPages: [
  GetPage(name:"/first", page: () => FirstScreen()),
  GetPage(name:"/second/:num", page: () => SecondScreen()),
]

Get.toNamed("/second/1?name=argument");

Get.parameters["id"]
Get.parameters["name"]

 

 

라우트 애니메이션

• 페이지 이동 애니메이션을 transtion 을 통해 설정할 수 있습니다.
• transitionDuration 으로 조절 가능합니다.

Get.to(SecondScreen(), transition: Transition.fade);

GetPage(
   name: '/second',
   page: () => SecondScreen(),
   transition: Transition.fade,
   transitionDuration: const Duration(microseconds: 300)
);

enum Transition {
  fade,
  fadeIn,
  rightToLeft,
  leftToRight,
  upToDown,
  downToUp,
  rightToLeftWithFade,
  leftToRightWithFade,
  zoom,
  topLevel,
  noTransition,
  cupertino,
  cupertinoDialog,
  size,
  circularReveal,
  native,
}

 

 

 

 

GitHub - jonataslaw/getx: Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies eas