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

04 Dec 2023

flutter

플러터(Flutter)는 터치 이벤트를 감지하여 위젯의 크기를 조절하는 기능을 제공합니다. getX 함수는 터치 이벤트가 발생한 위치의 X 좌표 값을 반환합니다. 이를 활용하여 터치 이벤트에 따라 위젯의 크기를 동적으로 조절할 수 있습니다.

getX 함수 사용하기

getX 함수를 사용하려면 flutter/gestures.dart 패키지를 임포트해야 합니다.

import 'package:flutter/gestures.dart';

getX 함수는 GestureDetector 위젯의 onPanUpdate 콜백 함수에서 사용됩니다. onPanUpdate는 드래그 동작이 발생했을 때 호출되는 함수입니다. 아래의 예제 코드를 통해 getX 함수를 사용하는 방법을 알아보겠습니다.

import 'package:flutter/material.dart';

class ResizableWidget extends StatefulWidget {
  @override
  _ResizableWidgetState createState() => _ResizableWidgetState();
}

class _ResizableWidgetState extends State<ResizableWidget> {
  double _width = 200;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          _width += details.delta.dx; // getX 함수로 얻은 X 좌표 값을 이용하여 width 값 조절
        });
      },
      child: Container(
        width: _width,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

위의 코드는 위젯의 너비를 200으로 초기화하고, 드래그 동작이 발생할 때마다 getX 함수로 얻은 X 좌표 값을 이용하여 너비를 조절하는 예제입니다.

결과 확인하기

ResizableWidget을 사용하여 위젯의 크기를 조절할 수 있습니다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Resizable Widget'),
      ),
      body: Center(
        child: ResizableWidget(),
      ),
    ),
  ));
}

위의 코드에서 실행한 결과는 아래와 같습니다.

결론

getX 함수를 사용하여 터치 이벤트에 따라 위젯의 크기를 동적으로 조절할 수 있습니다. 위의 예제를 참고하여 자신만의 리사이저블 위젯을 만들어보세요. Flutter의 제스처 기능은 사용자와의 상호작용을 더욱 향상시키기 위한 강력한 도구입니다.