[Flutter] GetX (Parameters route)

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

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

소스코드 위치 - Release 08_parameter_route · mike-bskim/getx_test · GitHub

Release 08_parameter_route · mike-bskim/getx_test

 

프로젝트 구조

main.dart

/src/home.dart

/src/pages/url_parameter/user_info_page.dart

 

main.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'src/home.dart';
import 'src/pages/argument/argument_page.dart';
import 'src/pages/named/first.dart';
import 'src/pages/named/second.dart';
import 'src/pages/url_parameter/user_info_page.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,
      ),
// 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: '/argument',
            page: () => const ArgumentPage(),
            transition: Transition.fadeIn),
        GetPage(
            name: '/user/:uid',
            page: () => const UserInfoPage(),
            transition: Transition.fadeIn),
      ],
    );
  }
}

 

/src/home.dart

 

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

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

  @override
  Widget build(BuildContext context) {
    ButtonStyle elevatedButtonStyle =
        ElevatedButton.styleFrom(minimumSize: const Size(280.0, 35.0));

    return Scaffold(
      appBar: AppBar(
        title: const Text("라우트 관리 홈"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              style: elevatedButtonStyle,
              child: const Text("단순 페이지 라우팅"),
              onPressed: () {
                // Navigator.of(context).push(MaterialPageRoute(
                //   builder: (BuildContext context) => const FirstPage(),
                // ));
                Get.to(() => const FirstPage());
              },
            ),
            ElevatedButton(
              style: elevatedButtonStyle,
              child: const Text("named 페이지 라우팅"),
              onPressed: () {
                // Navigator.of(context).pushNamed("/first-named");
                Get.toNamed("first-named");
              },
            ),
            ElevatedButton(
              style: elevatedButtonStyle,
              child: const Text("Arguments 로 데이터 보내기 : Flutter"),
              onPressed: () {
                // 문자열, 숫자 전달 가능
                // Get.to(const ArgumentPage(), arguments: "Flutter");
                // Get.to(() => const ArgumentPage(), arguments: 5);
                // map 타입 전달
                // Get.to(() => const ArgumentPage(), arguments: {"name": "Flutter", "age": 22});
                // 클래스 객체도 전달가능
                Get.to(() => const ArgumentPage(),
                    arguments: User(name: "Flutter", age: 3.0));
                // Get.toNamed("/argument", arguments: "Flutter");
              },
            ),
            ElevatedButton(
              style: elevatedButtonStyle,
              child: const Text("URL Parameters 로 데이터 보내기"),
              onPressed: () {
                Get.toNamed("/user/1424?name=Flutter&age=22");
              },
            ),
          ],
        ),
      ),
    );
  }
}

class User {
  final String name;
  final double age;

  User({required this.name, required this.age});
}

 

/src/pages/url_parameter/user_info_page.dart

 

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

import '../../home.dart';

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

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle = const TextStyle(fontSize: 20.0);
    return Scaffold(
        appBar: AppBar(
          title: const Text("parameters 받기"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("${Get.parameters["uid"]} 회원님", style: textStyle),
              Text("당신의 이름은 : ${Get.parameters["name"]}", style: textStyle),
              Text("당신의 나이는 : ${Get.parameters["age"]}", style: textStyle),
              const SizedBox(height: 20.0),
              ElevatedButton(
                child: const Text("이전페이지로 이동"),
                onPressed: () {
                  Get.back();
                },
              ),
              ElevatedButton(
                child: const Text("홈으로 이동"),
                onPressed: () {
                  Get.offAll(() => const Home());
                },
              ),
            ],
          ),
        ));
  }
}

 

 

 

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

 

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

 

 

 

 

 

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