[flutter] getX 함수를 사용하여 터치 이벤트에 따른 슬라이더 값 변경하기

04 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 사용자의 터치 이벤트에 따라 슬라이더 값이 변경되도록 하는 방법을 알아보겠습니다. 이를 위해 getX 함수를 사용하여 사용자의 터치 위치를 감지하고, 해당 위치에 따라 슬라이더 값을 조정할 것입니다.

getX 함수

getX는 Flutter의 GetX 패키지에서 제공하는 함수 중 하나입니다. getX 함수를 사용하면 사용자의 터치 위치를 간단하게 추출할 수 있습니다. 이를 통해 슬라이더 값의 변경을 실시간으로 감지하고 업데이트할 수 있게 됩니다.

슬라이더 값 변경하기

다음은 getX 함수를 사용하여 터치 이벤트에 따른 슬라이더 값 변경을 구현하는 코드입니다. 코드는 Flutter 앱의 Stateful 위젯 내부에서 작성됩니다.

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

class SliderPage extends StatefulWidget {
  @override
  _SliderPageState createState() => _SliderPageState();
}

class _SliderPageState extends State<SliderPage> {
  double sliderValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider'),
      ),
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Slider Value: ${sliderValue.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 20.0),
            ),
            SizedBox(height: 20.0),
            GestureDetector(
              onHorizontalDragUpdate: (DragUpdateDetails details) {
                setState(() {
                  sliderValue += details.delta.dx / Get.width;
                  if (sliderValue < 0) {
                    sliderValue = 0;
                  } else if (sliderValue > 1) {
                    sliderValue = 1;
                  }
                });
              },
              child: Container(
                width: double.infinity,
                height: 50.0,
                child: Slider(
                  value: sliderValue,
                  onChanged: (value) {
                    setState(() {
                      sliderValue = value;
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(GetMaterialApp(home: SliderPage()));
}

위 코드에서는 getX 패키지의 Get.width를 사용하여 화면 너비를 가져온 후, 터치 이벤트를 받기 위해 GestureDetector를 사용합니다. onHorizontalDragUpdate 이벤트 핸들러에서는 터치 이벤트의 delta를 가져와 sliderValue를 조정합니다. sliderValue의 범위가 0과 1 사이로 유지되도록 if 문을 사용합니다.

Slider 위젯은 sliderValue를 값으로 받아 화면에 나타내는 역할을 합니다. onChanged 콜백 함수를 통해 sliderValue 값을 업데이트합니다.

이제 앱을 실행하면 슬라이더 값을 터치로 변경할 수 있는 것을 확인할 수 있습니다.

이제 Flutter 앱에서 getX 함수를 사용하여 터치 이벤트에 따른 슬라이더 값 변경을 구현하는 방법을 알아보았습니다. getX 함수를 통해 간편하게 사용자의 터치 위치를 감지하고, 슬라이더 값의 실시간 변경이 가능합니다.