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

04 Dec 2023

flutter

개요

Flutter에서 제공하는 getX 함수를 사용하면 터치 이벤트에 따라 위젯의 크기를 동적으로 변경할 수 있습니다. 이 기능을 사용하면 사용자의 터치 동작에 반응하여 UI를 보다 유연하게 조정할 수 있습니다.

getX 함수란?

getX 함수는 Flutter GetX 패키지에서 제공하는 함수로, 제스처 동작을 쉽게 처리할 수 있도록 도와줍니다. getX 함수는 사용자의 터치 이벤트를 감지하고, 제스처에 따라 상태를 업데이트할 수 있습니다.

위젯 크기 변경하기

아래의 예제 코드는 getX 함수를 사용하여 터치 이벤트에 따라 위젯의 크기를 변경하는 방법을 보여줍니다.

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

class ResizableWidget extends StatelessWidget {
  final double defaultSize = 100.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onVerticalDragUpdate: (details) {
        Get.find<MyController>().updateWidgetSize(details.delta.dy);
      },
      child: GetBuilder<MyController>(
        init: MyController(),
        builder: (controller) {
          return Container(
            width: defaultSize + controller.deltaSize,
            height: defaultSize + controller.deltaSize,
            color: Colors.blue,
          );
        },
      ),
    );
  }
}

class MyController extends GetxController {
  double deltaSize = 0.0;

  void updateWidgetSize(double delta) {
    deltaSize += delta;
    update();
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Resizable Widget')),
        body: Center(
          child: ResizableWidget(),
        ),
      ),
    );
  }
}

위의 예제 코드에서 ResizableWidget 위젯은 GestureDetector를 감싸고 있습니다. 이때 onVerticalDragUpdate 이벤트를 통해 사용자의 세로 스위프트 동작을 감지합니다. 그리고 GetX 패키지의 MyController 클래스의 updateWidgetSize 함수를 호출하여 위젯의 크기를 업데이트합니다.

MyController 클래스는 GetX 패키지의 GetxController를 상속받은 클래스로, deltaSize 변수에 변화를 저장하고, update 함수를 호출하여 상태를 업데이트합니다. 위젯의 크기를 변경할 때마다 MyController의 updateWidgetSize 함수가 호출되고, deltaSize 값이 변경되며 위젯의 크기도 함께 변경됩니다.

결론

GetX 함수를 사용하면 Flutter에서 터치 이벤트에 따라 위젯의 크기를 동적으로 변경할 수 있습니다. 이를 통해 사용자와 상호작용하는 동적인 UI를 구현할 수 있습니다.

개요

getX 함수란?

위젯 크기 변경하기

결론

참고 자료