[flutter] #1-2 Getx - Named Route management

giyeon·2021년 5월 12일
0

flutter-getx

목록 보기
2/8
post-thumbnail

#이 포스팅은 플린이의 입장에서 쓰여진 글입니다. 플잘알이신 분들이 보시면 급성두통 및 호흡 곤란이 오실 수도 있습니다. 코드 지적은 언제나 환영입니다. 🙆🏻‍♂️

이 프로젝트는 Youtube '개발하는남자'의 'GetX 주요 기능 3가지 중 그 첫번째 Route 관리 #2' 강의를 참고했습니다.


Named Page Routing

일반적인 Page Routing 보다는 Named Page Routing을 쓰는게 대부분이죠!

Named page Routing을 쓰려면 먼저 Route setting을 해줘야 해요.

Route Setting

main.dart

Getx를 사용하기 전에 먼저 일반적인 방법을 볼게요.

return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => Home(),
        '/first': (context) => FirstNamedPage(),
        '/second': (context) => SecondNamedPage(),
      },
    );

일반적인 방법은 'routes' 를써요.

이번엔 Getx를 사용해볼게요.

   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()),
      ],
    );

어떻게 보면 일반적인 방법이 더 간결해보여요.
하지만 Getx을 사용해서 설정하면 후에 많은 기능들을 사용할 수 있어요!

Using Named Routing

라우트 설정을 마쳤으니
이제 사용해볼게요.

위쪽 코드는 일반적인 Named Routing, 아래쪽은 Getx를 이용한 Named Routing 이에요.

            RaisedButton(
              child: Text("일반적인 Named 라우트"),
              onPressed: () {
                Navigator.of(context).pushNamed('/first');
              },
            ),
            RaisedButton(
              child: Text("Getx Named 라우트"),
              onPressed: () {
                Get.toNamed('/first');
              },
            ),

이번엔 코드 길이 차이가 별로 없는것 같아요.

추가로 이전의 page를 스택에서 지우고 이동하는 offNamed() method가 있어요.

   Get.offNamed('/first');

마지막으로 page stack history를 다 지우면서 page 이동을 하는 offAllNamed() 입니다.

 Get.offAllNamed('/');

조아요.
다음 포스팅은 argument전달은 Getx를 통해 어떻게 하는지 !
알아볼게요 :)

profile
developer wannabe 🧑🏻‍💻

0개의 댓글