[Flutter] GetX (Arguments route)

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

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

소스코드 위치 - Release 07_argument_route2 · mike-bskim/getx_test · GitHub

Release 07_argument_route2 · mike-bskim/getx_test

 

프로젝트 구조

main.dart

/src/home.dart

/src/pages/argument/argument_page.dart

 

 

main.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'src/home.dart';
import 'src/argument/argument_page.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: '/argument',
            page: () => const ArgumentPage(),
            transition: Transition.fadeIn),
      ],
    );
  }
}

 

/src/home.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '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) {
    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");
              },
            ),
            ElevatedButton(
              child: const Text("라우트에 데이터 보내기 : 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");
              },
            ),
          ],
        ),
      ),
    );
  }
}

class User {
  final String name;
  final double age;

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

 

/src/pages/argument/argument_page.dart

 

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

import '../home.dart';

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

  @override
  Widget build(BuildContext context) {
    // 클래스 객체로 전달받은 경우만 사용.
    User user = Get.arguments;

    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const Text("arguments 받기"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Text('전달받은 인자는 : [${Get.arguments}]'),
            // Text('전달받은 인자는 : [Get.arguments.toString()),
// map 타입으로 전달받은 경우
            // Text("${Get.arguments["name"]} : ${Get.arguments["age"]}"),
// 클래스 객체타입으로 전달받은 경우
            Text("${user.name} : ${user.age}"),
            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
    );

 

 

 

 

 

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