[flutter] getX 함수를 사용하여 터치 이벤트에 따른 다중 슬라이더 구현하기

04 Dec 2023

flutter

개요

이번 글에서는 Flutter의 getX 함수를 활용하여 터치 이벤트에 따른 다중 슬라이더를 구현하는 방법을 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter에서 제공하는 GestureDetector의 일부 기능입니다. 이 함수를 사용하면 사용자의 터치 이벤트를 감지하고 해당 위치를 좌표로 변환할 수 있습니다.

다중 슬라이더 구현하기

다중 슬라이더를 구현하기 위해서는 getX 함수를 이용하여 사용자가 터치한 위치를 파악하고, 슬라이더의 값에 반영해야 합니다.

다음은 getX 함수를 이용한 다중 슬라이더의 구현 예시입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('다중 슬라이더 예제'),
        ),
        body: Center(
          child: MultiSlider(),
        ),
      ),
    );
  }
}

class MultiSlider extends StatefulWidget {
  @override
  _MultiSliderState createState() => _MultiSliderState();
}

class _MultiSliderState extends State<MultiSlider> {
  double _slider1Value = 0;
  double _slider2Value = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          // 첫 번째 슬라이더 위치 업데이트
          _slider1Value += details.delta.dx / 100;

          // 두 번째 슬라이더 위치 업데이트
          _slider2Value += details.delta.dy / 100;
        });
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Slider 1: $_slider1Value'),
          Slider(
            value: _slider1Value,
            onChanged: (double value) {
              setState(() {
                _slider1Value = value;
              });
            },
            min: 0,
            max: 100,
          ),
          Text('Slider 2: $_slider2Value'),
          Slider(
            value: _slider2Value,
            onChanged: (double value) {
              setState(() {
                _slider2Value = value;
              });
            },
            min: 0,
            max: 100,
          ),
        ],
      ),
    );
  }
}

위 예시에서는 GestureDetector를 이용하여 onPanUpdate 콜백을 등록하였습니다. 이 콜백은 사용자가 터치한 위치를 업데이트할 때마다 호출되며, 각 슬라이더의 값이 업데이트됩니다.

결론

Flutter의 getX 함수를 이용하면 터치 이벤트에 따라 발생하는 좌표를 쉽게 알 수 있습니다. 이를 활용하여 다중 슬라이더 등의 다양한 인터랙티브 요소를 구현할 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참조해주세요.