[flutter] getX 함수를 사용하여 터치 이벤트에 따라 화면 크기 조절하기

04 Dec 2023

flutter

Flutter는 모바일 애플리케이션 개발을 위한 인기 있는 프레임워크입니다. Flutter에는 getX 함수를 사용하여 터치 이벤트를 감지하고 화면 크기를 조절하는 기능이 있습니다. 이 기능을 사용하면 사용자가 앱의 화면을 터치할 때마다 화면 크기를 동적으로 조절할 수 있습니다.

getX 함수란?

getX는 Flutter 패키지 flutter_gesture_detector에서 제공하는 함수입니다. 이 함수는 터치 이벤트를 감지하여 사용자가 화면을 드래그하거나 스케일링하는 등의 제스처를 인식합니다. getX 함수는 GetX 위젯 내에서 사용할 수 있으며, 간단한 사용법을 통해 터치 이벤트를 쉽게 처리할 수 있도록 도와줍니다.

getX 함수로 화면 크기 조절하기

다음은 getX 함수를 사용하여 터치 이벤트에 따라 화면 크기를 조절하는 예시 코드입니다.

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleUpdate: (ScaleUpdateDetails details) {
        final scale = details.scale;
        Get.find<Controller>().updateScale(scale);
      },
      child: Obx(() => Container(
        width: 200 * Get.find<Controller>().scale.value,
        height: 200 * Get.find<Controller>().scale.value,
        color: Colors.blue,
      )),
    );
  }
}

class Controller extends GetxController {
  final scale = 1.0.obs;

  void updateScale(double newScale) {
    scale.value = newScale;
  }
}

void main() {
  runApp(GetMaterialApp(
    home: Scaffold(
      body: Center(child: MyWidget()),
    ),
    initialBinding: BindingsBuilder(() {
      Get.put(Controller());
    }),
  ));
}

위 코드에서는 GetX 패키지의 GetMaterialApp 위젯을 사용하여 앱을 구성하고, Controller라는 컨트롤러를 만들어 화면 크기 조절을 관리합니다. MyWidget 위젯에서는 GetX 패키지의 GetX 함수를 사용하여 제스처 이벤트를 감지하고, 해당 이벤트에 따라 화면의 크기를 조절합니다.

결론

Flutter의 getX 함수를 사용하여 터치 이벤트에 따라 화면 크기를 조절하는 방법에 대해 알아보았습니다. 이 기능을 활용하면 사용자의 터치 동작에 맞춰 앱의 화면을 동적으로 조절할 수 있습니다. 좀 더 복잡한 제스처 이벤트를 다루고 싶다면, Flutter Gesture Detector 패키지의 다양한 함수들을 참고해보세요.