[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 숨기기/보이기 처리하기

04 Dec 2023

flutter

이번 포스트에서는 Flutter의 getX 함수를 사용하여 터치 이벤트에 따른 위젯의 숨김/보임 처리를 다루어보겠습니다. getX 함수는 GetX 패키지의 일부로 제공되는 상태 관리 도구입니다. 이를 사용하여 터치 이벤트를 감지하고, 이벤트에 따라 위젯의 가시성을 조작할 수 있습니다.

필요한 패키지 import하기

먼저, getX 함수를 사용하기 위해 Get 패키지를 프로젝트에 import 해야 합니다. 아래와 같이 프로젝트의 pubspec.yaml 파일에 get 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8

그리고 패키지를 적용하기 위해 main.dart 파일에 다음 코드를 추가해주세요.

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

getX 함수 사용하기

이제 getX 함수를 사용하여 터치 이벤트에 따른 위젯 숨김/보임 처리를 해보겠습니다. 아래 코드를 참고하세요.

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

class MyWidget extends StatelessWidget {
  final _isVisible = false.obs;

  void toggleVisibility() {
    _isVisible.value = !_isVisible.value;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Example'),
      ),
      body: GestureDetector(
        onTap: toggleVisibility,
        child: Obx(
          () => _isVisible.value ? Text('Visible') : Text('Hidden'),
        ),
      ),
    );
  }
}

위의 코드에서 MyWidget 클래스는 StatelessWidget을 상속받으며, _isVisible라는 RxBool 변수를 사용하여 위젯의 가시성을 제어합니다. toggleVisibility 메소드는 터치 이벤트가 발생할 때마다 _isVisible 변수의 값을 반전시킵니다.

위의 코드에서는 GestureDetector를 사용하여 터치 이벤트를 감지하고, onTap 콜백 함수에서 toggleVisibility 메소드를 호출하여 위젯의 가시성을 변화시킵니다. 이때, Obx 위젯을 사용하여 _isVisible 변수의 값에 따라 Text 위젯의 내용을 조작합니다.

실행 결과

위의 코드를 실행하면 앱이 시작되면 “Visible”이라는 텍스트가 표시됩니다. 화면을 터치할 때마다 텍스트가 “Visible”에서 “Hidden”으로 번갈아가며 변경됩니다.

마무리

이렇게 getX 함수를 사용하여 터치 이벤트에 따른 위젯의 가시성을 제어할 수 있습니다. getX를 사용하면 간단하면서도 효과적인 상태 관리를 구현할 수 있으므로, 앱의 사용자 인터페이스에 인터랙션을 추가하고 싶을 때 유용하게 사용할 수 있습니다.

물론 위에서 작성한 코드는 단순한 예제일 뿐이며, 실제 앱에서는 더 복잡한 로직과 상태 관리가 필요할 수 있습니다. 만약 더 복잡한 예제나 다른 기능에 대한 코드를 원하신다면 공식 문서와 관련 자료를 참고해보시기 바랍니다.

참고 자료

GetX 패키지: https://pub.dev/packages/get