[Flutter] GetX (Named route)

이번 카테고리는 GetX 의 Named 라우팅에 대해서 알아보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

소스코드 위치 - Release 05_named_route · mike-bskim/getx_test · GitHub

Release 05_named_route · mike-bskim/getx_test

 

프로젝트 구조

main.dart

/src/home.dart

/src/pages/named/first.dart, second.dart

 

main.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'src/home.dart';
import 'src/pages/named/first.dart';
import 'src/pages/named/second.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
// Navigator.of(context) 를 사용하는 경우, initialRoute,routes 필요함.
      // home: const Home(),
      // initialRoute: '/',
      // routes: {
      //   '/': (context) => const Home(),
      //   '/first-named': (context) => const FirstNamedPage(),
      //   '/second-named': (context) => const SecondNamedPage(),
      // },
// Get.toNamed 를 사용하는 경우, getPages,GetPage 필요함.
      getPages: [
        GetPage(name: '/', page: () => const Home()),
        GetPage(
            name: '/first-named',
            page: () => const FirstNamedPage(),
            transition: Transition.fadeIn),
        GetPage(
            name: '/second-named',
            page: () => const SecondNamedPage(),
            transition: Transition.fadeIn),
        // GetPage(name: '/user/:uid', pages: () => const UserInfoPage()),
      ],
    );
  }
}

 

/src/home.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'pages/normal/first.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("라우트 관리 홈"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text("단순 페이지 라우팅"),
              onPressed: () {
                // Navigator.of(context).push(MaterialPageRoute(
                //   builder: (BuildContext context) => const FirstPage(),
                // ));
                Get.to(() => const FirstPage());
              },
            ),
            ElevatedButton(
              child: const Text("named 페이지 라우팅"),
              onPressed: () {
                // Navigator.of(context).pushNamed("/first-named");
                Get.toNamed("first-named");
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

/src/pages/named/first.dart

 

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

class FirstNamedPage extends StatelessWidget {
  const FirstNamedPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: const Text("(Named) 첫번째 페이지"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: const Text("다음 페이지 이동"),
                onPressed: () {
                  // Navigator.of(context).pushNamed("/second-named");
                  Get.toNamed("second-named");
                },
              ),
              ElevatedButton(
                child: const Text("이전페이지로 이동"),
                onPressed: () {
                  // Navigator.of(context).pop();
                  Get.back();
                },
              ),
            ],
          ),
        ));
  }
}

 

/src/pages/named/second.dart

 

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

class SecondNamedPage extends StatelessWidget {
  const SecondNamedPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const Text("(Named) 두번째 페이지"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text("홈으로 이동"),
              onPressed: () {
                // Navigator.of(context).pushNamed("/");
                Get.toNamed("/");
              },
            ),
            ElevatedButton(
              child: const Text("이전페이지로 이동"),
              onPressed: () {
                // Navigator.of(context).pop();
                Get.back();
              },
            ),
            ElevatedButton(
              child: const Text("홈으로 돌아가기"),
              onPressed: () {
                // Navigator.of(context)
                //     .pushNamedAndRemoveUntil("/", (route) => false);
                Get.offAllNamed("/");
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

 

 

• 참고사항(named route) - Get.toNamed("/argument", arguments: "Flutter") 로 전달시, argument 페이지에서 인자만 변경하여 argument 페이지를 호출하려면 되지 않는다.
• 이럴때는 "preventDuplicates" 옵션을 사용하여 반복 호출을 할수 있고, 스택에도 계속 쌓이니 주의를 해야 한다.

 

Get.toNamed(
    '/argument',
    arguments: {'itemKey': _itemModel.itemKey},
    // 같은 페이지는 호출시, 중복방지가 기본설정인, false 하면 중복 호출 가능,
    preventDuplicates: false
    );

 

 

 

 

 

[참고자료] 유투브 - 개발하는 남자.