[flutter] getX 함수를 사용하여 터치 이벤트에 따른 이미지 뒤집기 기능 구현하기

04 Dec 2023

flutter

이번 블로그에서는 Flutter의 getX 함수를 사용하여 터치 이벤트에 따라 이미지를 뒤집는 기능을 구현하는 방법에 대해 알아보겠습니다.

getX 함수란?

GetX는 Flutter의 상태 관리 패키지인 GetX의 핵심 함수입니다. 이 함수는 상태 변화를 관찰하고 해당 변화에 따라 UI를 업데이트하는데 도움을 줍니다. getX 함수를 사용하면 간단하게 상태 관리를 할 수 있어 코드의 가독성과 유지보수성이 향상됩니다.

터치 이벤트에 따른 이미지 뒤집기

이제 getX 함수를 사용하여 터치 이벤트에 따라 이미지를 뒤집는 기능을 구현해보겠습니다.

먼저, 이 프로젝트에 GetX 패키지를 추가해야합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

flutter pub get 명령을 통해 패키지를 다운로드합니다.

이제 메인 화면에서 상태 관리에 필요한 변수와 함수를 정의합니다. 아래와 같이 코드를 작성합니다:

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

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

class MyController extends GetxController {
  RxBool isFlipped = false.obs;
  
  void flipImage() {
    isFlipped.value = !isFlipped.value;
  }
}

class MyApp extends StatelessWidget {
  final MyController controller = Get.put(MyController());
  
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Image Flip',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Flip'),
        ),
        body: Center(
          child: GetBuilder<MyController>(
            builder: (_) => GestureDetector(
              onTap: () => controller.flipImage(),
              child: Image(
                image: AssetImage(
                  _.isFlipped.value ? 'assets/reverse_image.png' : 'assets/image.png',
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 MyController 클래스를 정의하여 isFlipped라는 RxBool 변수를 선언했습니다. 이 변수는 이미지가 뒤집혀있는지 여부를 나타냅니다. flipImage 함수를 통해 해당 변수를 토글하는 기능을 구현했습니다.

MyApp 위젯에서는 GetBuilder를 사용하여 MyController의 상태를 관찰하고, GestureDetector를 통해 터치 이벤트를 처리합니다. onTap 함수에서는 flipImage를 호출하여 이미지를 뒤집습니다.

마지막으로, assets 폴더에 image.png와 reverse_image.png 이미지 파일을 추가해야합니다.

이제 앱을 실행해보면 이미지를 터치할 때마다 뒤집히는 것을 확인할 수 있습니다.

결론

Flutter의 GetX 함수를 사용하여 터치 이벤트에 따른 이미지 뒤집기 기능을 구현하는 방법에 대해 알아보았습니다. getX 함수를 사용하면 간편하게 상태 관리를 할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

목차

getX 함수란?

터치 이벤트에 따른 이미지 뒤집기

결론