[flutter] 플러터 getX 함수의 사용법

04 Dec 2023

flutter

GetX는 플러터(Flutter) 앱 개발을 위해 사용되는 상태 관리 라이브러리이며, 간단하고 직관적인 사용법으로 인기가 많습니다. getX 함수는 상태를 관리하고 업데이트하는데 사용됩니다. 이번 포스트에서는 getX 함수의 기본 사용법에 대해 알아보겠습니다.

1. getX 라이브러리 추가하기

먼저, 프로젝트에 getX 라이브러리를 추가해야 합니다. 이를 위해 pubspec.yaml 파일을 열고 dependencies 섹션에 다음 코드를 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4  # getX 라이브러리 추가

그리고 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 다운로드합니다.

2. getX 함수 사용하기

getX 함수를 사용하기 위해 상태 관리를 원하는 위젯에 GetX 위젯을 추가합니다. 그리고 Controller 클래스를 만들고, GetX 위젯 안에서 해당 컨트롤러를 사용합니다.

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

// Controller 클래스 정의
class MyController extends GetxController {
  var count = 0;

  void increment() {
    count++;
    update();
  }
}

class MyHomePage extends StatelessWidget {
  final MyController myController = Get.put(MyController());  // 컨트롤러 인스턴스 생성

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Count: ",  // 상태 값 출력
              style: TextStyle(fontSize: 24),
            ),
            Obx(() => Text(
                  "${myController.count}",  // 상태 값 출력
                  style: TextStyle(fontSize: 48),
                )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          myController.increment();  // 상태 업데이트
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예제 코드에서 MyController 클래스는 count 변수를 가지고 있고, increment 함수를 통해 count 값을 업데이트합니다. 그리고 MyHomePage 위젯에서 Get.put 함수를 통해 MyController 인스턴스를 생성하고 상태를 관리합니다.

상태 값은 Obx 위젯에서 감지되고, 상태가 변경될 때마다 자동으로 업데이트됩니다. 위젯은 GetX 위젯 안에서 작성되므로 데이터의 변화가 바로 반영됩니다.

이제 위젯을 실행하면 화면에 “Count” 텍스트와 현재 count 값이 표시되며, FAB를 누르면 count 값이 증가합니다.

1. getX 라이브러리 추가하기

2. getX 함수 사용하기

참고 자료