[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 내용 변경하기

04 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 멋진 애플리케이션을 만들 수 있습니다. getX는 Flutter에서 상태 관리를 위해 사용되는 패키지 중 하나로, 터치 이벤트에 따라 위젯의 내용을 변경하는 경우에 유용하게 사용될 수 있습니다.

getX 패키지 설치

getX를 사용하기 위해 먼저 해당 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가해주세요.

dependencies:
  getX: ^3.25.3

의존성을 추가한 후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.

getX를 사용하여 터치 이벤트 처리하기

getX를 사용하여 터치 이벤트에 따라 위젯의 내용을 변경하는 방법을 알아보겠습니다. 아래는 간단한 예제입니다.

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

class MyPage extends StatelessWidget {
  final controller = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Example'),
      ),
      body: Center(
        child: Obx(
          () => GestureDetector(
            onTap: () {
              controller.updateTitle('Hello, World!');
            },
            child: Text(
              controller.title.value,
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

class MyController extends GetxController {
  var title = 'Click Me'.obs;

  void updateTitle(String newTitle) {
    title.value = newTitle;
  }
}

void main() {
  runApp(GetMaterialApp(
    home: MyPage(),
  ));
}

위 예제에서는 MyController 클래스를 만들고, title 변수를 상태로 사용하고 있습니다. updateTitle 메서드를 통해 title 값을 갱신할 수 있습니다.

MyPage 위젯에서는 GetX 패키지의 Obx 위젯을 사용하여 controller.title의 변화를 감지하고, 해당 값이 변경될 때마다 화면을 업데이트합니다. 또한 GestureDetector를 사용하여 터치 이벤트를 처리하고, controller.updateTitle 메서드를 호출하여 title 값을 변경합니다.

이제 애플리케이션을 실행하고 텍스트를 터치해보면, 텍스트가 ‘Hello, World!’로 변경되는 것을 확인할 수 있습니다. 저장하면서 자동으로 화면이 업데이트되는 것은 getX의 강력한 기능 중 하나입니다.

getX를 사용하여 터치 이벤트에 따른 위젯 내용 변경을 쉽게 처리할 수 있습니다. 상태 관리를 효율적으로 다룰 수 있으며, 코드의 가독성도 향상됩니다.

더 많은 정보를 얻으려면 GetX 공식 문서를 참조해주세요.