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

04 Dec 2023

flutter

Flutter에서는 getX 함수를 사용하여 터치 이벤트의 X 좌표 값을 가져올 수 있습니다. 이를 활용하여 원의 크기를 변경하는 예제를 살펴보겠습니다.

1. getX 함수 사용하기

getX 함수는 GestureDetector의 onPanUpdate 콜백 메서드에서 사용될 수 있습니다. onPanUpdate 콜백 메서드는 사용자가 화면에서 손가락을 움직일 때 호출되는 함수입니다.

import 'package:flutter/material.dart';

class MyCircle extends StatefulWidget {
  @override
  _MyCircleState createState() => _MyCircleState();
}

class _MyCircleState extends State<MyCircle> {
  double circleSize = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circle Size Changer'),
      ),
      body: Center(
        child: GestureDetector(
          onPanUpdate: (DragUpdateDetails details) {
            setState(() {
              circleSize += details.delta.dx;
            });
          },
          child: Container(
            width: circleSize,
            height: circleSize,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 GestureDetector를 사용하여 사용자의 터치 동작을 감지하고, onPanUpdate 메서드에서 getX 함수를 사용하여 X 좌표값을 가져와서 원의 크기를 변경하고 있습니다.

2. 실행 결과

위 코드를 작성하고 실행하면, 원을 터치하고 좌우로 움직이면 원의 크기가 변경되는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 Flutter의 getX 함수를 사용하여 터치 이벤트에 따라 원의 크기를 변경하는 방법에 대해 알아보았습니다. getX 함수를 활용하면 터치 동작을 기반으로 한 다양한 UI 상호작용을 구현할 수 있으므로, 다양한 프로젝트에 적용해보시기 바랍니다.

참고:

Flutter 공식 문서