[Flutter] GetX Routing 사용법 및 기존 routing 비교

GetX packages

https://pub.dev/packages/get

get | Flutter Package

 

기본 페이지 라우팅

main.dart - GetMaterialApp 사용

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

Page 이동

기존 라우팅

Navigator.of(context).push(MaterialPageRoute(builder: (_) => FirstPage()));

GetX 라우팅

Get.to(() => FirstPage());

뒤로 이동

기존 라우팅

Navigator.of(context).pop();

GetX 라우팅

Get.back();

페이지 이동시 이전 히스토리 삭제

기존 라우팅

Navigator.of(context).pushAndRemoveUntil(
                      MaterialPageRoute(builder: (_) => Home()),
                      (route) => false);

GetX 라우팅

Get.offAll(Home());

Named 페이징 라우팅

Named route 정의

main.dart

기존 라우팅

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => Home(),
        '/first': (context) => FirstNamedPage(),
        '/second': (context) => SecondNamedPage(),
      },
    );
  }
}

GetX 라우팅

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => Home()),
        GetPage(name: '/first', page: ()=>FirstNamedPage()),
        GetPage(name: '/second', page: ()=>SecondNamedPage()),
      ],
    );
  }
}

Page 이동

기존 라우팅

Navigator.of(context).pushNamed('/first');

GetX 라우팅

Get.toNamed('/first');

GetX 라우팅 현재페이지 삭제 후 이동

Get.offNamed('/second'); // /first페이지 삭제 후 /second 이동

페이지 이동시 이전 히스토리 삭제

기존 라우팅

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

GetX 라우팅

Get.offAllNamed('/');

페이지 전환 효과 적용

GetX

getPages의 transition 속성 지정

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => Home(), transition: Transition.zoom),
        GetPage(
            name: '/first',
            page: () => FirstNamedPage(),
            transition: Transition.zoom),
        GetPage(
            name: '/second',
            page: () => SecondNamedPage(),
            transition: Transition.zoom),
      ],
    );
  }
}

arguments 전달

GetX

// 전달할때
Get.toNamed('/first', arguments: "argument");
Get.to(FristPage(),arguments: 3);
Get.toNamed('/first', arguments: {"name":"name", "num":"11"});

// 받을때
Text("${Get.arguments}"),
Text("${Get.arguments.toString()}"),
Text("${Get.arguments['name']}"),

GetX 객체 전달

// 객체전달
class User {
  String name;
  int age;
  User(this.name, this.age);
}

Get.toNamed('/next', arguments: User("name", 11));

// 객체받기
Text("${(Get.arguments as User).name} : ${(Get.arguments as User).age} "),

동적 링크 사용

동적 링크 정의

GetPage(
  name: '/user/:uid', 
  page: () => UserPage(),
  transition: Transition.zoom)

파라미터 전달

Get.toNamed('/next/28353');

파라미터 받기

Text("${Get.parameters['uid']}"),

복잡한 파라미터 전달

Get.toNamed('/next/28353?name=name&age=11');

복잡한 파라미터 받기

Text("${Get.parameters['uid']}"),
Text("${Get.parameters['name']}"),
Text("${Get.parameters['age']}"),

참고

https://www.youtube.com/watch?v=OXfG-D4PNpQ