[Flutter GetX : 06] GetxService

GetxService

---

1. GetxController와의 차이점

GetxController는 인스턴스를 자동으로 생성, 삭제할 수 있었지만, (permanent: true 속성을 적용할 경우 자동 삭제 방지 가능)

GetxService는 생성은 자동이나, 삭제는 수동으로 호출해야 한다는 차이점이 있다.

 

2. GetxService 활용 예제

지난번까지는 컨트롤러를 구현할 때  GetxController를 extends 해왔다.

이번에는 GetxService를 상속받아 컨트롤러를 구현하고, 버튼 누르면 카운트가 되는 간단한 예제에 적용시켜보자.

 

(main.dart)

import 'package:flutter/material.dart';
import 'package:flutter_getx/src/home.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const Home(),
    );
  }
}

(src/home.dart)

바인딩 기능으로 나중에 구현할 GetxServiceTest라는 이름의 컨트롤러를 적용하였다.

lazyPut() 메서드를 적용하였다.

import 'package:flutter/material.dart';
import 'package:flutter_getx/src/pages/getx_service_page.dart';
import 'package:get/get.dart';

import 'controller/getx_service_test.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(
                onPressed: () {
                  Get.to(
                    const GetxServiceWidget(),
                    binding: BindingsBuilder(
                            () => Get.lazyPut<GetxServiceTest>(() => GetxServiceTest()),
                    ),
                  );
                },
                child: const Text("GetxService"),
            ),
          ]
        )
      )
    );
  }
}

(src/controller/getx_service_test.dart)

컨트롤러 구현부이다. GetxService를 상속받아서 반응형으로 구현했다.

import 'package:get/get.dart';

class GetxServiceTest extends GetxService {
  static GetxServiceTest get to => Get.find();
  RxInt count = 0.obs;

  void increase() {
    count++;
  }
}

(src/pages/state/getx_service_page.dart)

컨트롤러의 기능들을 반영하는 페이지이다. 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_getx/src/controller/getx_service_test.dart';
import 'package:get/get.dart';

class GetxServiceWidget extends GetView<GetxServiceTest>{
  const GetxServiceWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(
                () => Text(
                  controller.count.value.toString(),
                  style: const TextStyle(fontSize: 50),
                ),
            ),
            ElevatedButton(
                onPressed: () {
                  controller.increase();
                },
                child: const Text("Increase"),
            ),
            ElevatedButton(
              onPressed: () {
                Get.reset(); // 모든 Get 인스턴스를 초기화
              },
              child: const Text("Clear"),
            ),
          ],
        )
      )
    );
  }
}

Get.reset()의 경우, 모든 컨트롤러 인스턴스를 초기화하는 기능을 가지고 있다. 간단한 코드이기 때문에 굳이 컨트롤러 내부에 메서드를 선언하지 않고 밖에서 짤막하게 작성해도 괜찮다.

GetxService 버튼을 누르면 컨트롤러 인스턴스가 생성된다.

여기서 뒤로가기 버튼을 눌러보자.

컨트롤러를 GetxController를 상속받아 만든 경우, lazyPut()메서드로 바인딩을 했다면 뒤로가기를 했을 때 컨트롤러 인스턴스가 자동으로 메모리에서 제거가 되었었다.

그래서 이전 페이지로 돌아가서 다시 저 화면으로 들어가면 인스턴스 제거 -> 인스턴스 생성 -> 인스턴스 제거....가 가능하다.

 

그러나 GetxService를 상속받아 만든 경우에는 자동으로 인스턴스 제거가 이루어지지 않는다.

뒤로갔다가 다시 저 화면으로 들어가는 것을 반복해도 제거가 되지 않으니 새로운 인스턴스가 생성되지 않을 것이다.(싱글톤 패턴이기 때문이다!)

 

따라서 이렇게 생성된 인스턴스의 경우 Get.reset() 메서드를 이용해 인스턴스를 초기화 해야 새로운 인스턴스를 생성할 수 있다.

clear버튼을 누르고 다시 이전 페이지로 돌아간 다음 GetxService 버튼을 누르면 인스턴스가 새로 생성되는 것을 확인할 수 있다.