[Flutter] 2. GetX Navigation

 

GetX의 주요 기능 중 하나인 Navigation ( Route 관리 )에 대하여 알아보자.

 

우선 GetX를 적용하기 위해 GetMaterialApp으로 Widget을 감싸주자.

@override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter GetX',
      home: HomePage()
    );
}

 

1. 기본 Navigation

1) 기존 Navigation

Flutter에서 기존에 사용하던 Navigation 방식은 다음과 같다.

Navigator.of(context).push(MaterialPageRoute(builder: (_) => FirstPage()));
Navigator.of(context).pop();
Navigator.of(context).pushAndRemoveUntil(MateriaPageRoute(builder: (_) => HomePage()), (route) => false);

Navigator에 context를 가지고 push 혹은 pop 등을 하였다.

 

2) GetX Navigation

그렇다면 GetX를 사용했을 때는 어떻게 달라질까?

Get.to(FirstPage()); // 넘어가기
Get.back(); // 뒤로 가기
Get.offAll(HomePage()); // 홈으로 이동하고 Stack에 쌓인 페이지들 전부 삭제

매우 간결하고 직관적으로 변했다. GetX가 매우 좋다고 생각하지 않는가?

이 뿐만 아니다.

 

2. Named Navigation

1) 기존 Named Navigation

아래와 같이 Route 설정을 해주었다.

      initialRoute: "/",
      routes: {
        "/" : (context) => HomePage(),
        "/first" : (context) => FirstNamedPage(),
        "/second" : (context) => SecondNamedPage(),
      },

그리고 화면 전환을 할 때는 아래와 같이 사용했다.

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

 

2) GetX Named Navigation

transition 속성을 이용하면 화면 전환 애니메이션도 적용할 수 있다.

initialRoute: "/",
getPages: [
  GetPage(name: "/", page: () => HomePage(), transition: Transition.zoom),
  GetPage(
    name: "/first",
    page: () => FirstNamedPage(),
    transition: Transition.zoom),
  GetPage(
    name: "/second",
    page: () => SecondNamedPage(),
    transition: Transition.zoom),
  GetPage(name: "/user/:uid", page: () => UserPage())
],

 

3. Parameter 같이 넘기기

1) 기존 Navigation

전달할 객체를 만들고 Screen의 생성자 Parameter로 같이 넘겨준다.

* 아래 내용은 Flutter 공식 사이트 예제 입니다. flutter-ko.dev/docs/cookbook/navigation/passing-data

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

class Todo {
  final String title;
  final String description;

  Todo(this.title, this.description);
}

void main() {
  runApp(MaterialApp(
    title: 'Passing Data',
    home: TodosScreen(
      todos: List.generate(
        20,
        (i) => Todo(
              'Todo $i',
              'A description of what needs to be done for Todo $i',
            ),
      ),
    ),
  ));
}

class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  TodosScreen({Key key, @required this.todos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index].title),
            // 사용자가 ListTile을 선택하면, DetailScreen으로 이동합니다.
            // DetailScreen을 생성할 뿐만 아니라, 현재 todo를 같이 전달해야
            // 한다는 것을 명심하세요.
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(todo: todos[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  // Todo를 들고 있을 필드를 선언합니다.
  final Todo todo;

  // 생성자는 Todo를 인자로 받습니다.
  DetailScreen({Key key, @required this.todo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // UI를 그리기 위해 Todo를 사용합니다.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

 

2) GetX Navigation

보내는 방법은 Get.to 혹은 toNamed 메소드에 arguments라는 Parameter에 객체를 전달하면 된다.

class DTO {
  String name;
  int num;

  DTO({this.name, this.num});
}

Get.to(FirstPage(), arguments: "굳굳");
Get.toNamed("/first", arguments: {"name":"굳굳","num":22});
Get.toNamed("/first", arguments: DTO(name: "굳굳", num: 22));

받는 쪽에서는 아래와 같이 사용하면 된다.

Text("${Get.arguments['name']} ${Get.arguments['num'].toString()}"),
Text("${(Get.arguments as DTO).name} ${(Get.arguments as DTO).num.toString()}"),

JSON 형식으로 받을 때는 위의 형식대로 받으면 되고, 객체로 받을 때는 아래와 같이 arguments를 객체로 타입 캐스팅해서 맴버 변수에 접근한다.

 

간단하게 GetX를 통한 Navigation (Route) 사용법에 대하여 알아보았다.

 

나름 편하다고 생각하지 않는가? (나는 편하다고 생각한다)

 

이후 게시글에서는 상태관리 및 DI에 대하여 순차적으로 알아보도록 하겠다!