[flutter] 플러터 Slider에서 실시간으로 값 변경을 반영하는 방법은?

08 Dec 2023

flutter

먼저, Slider 위젯을 사용하여 값이 변경될 때마다 상태를 업데이트해야 합니다. 이를 위해 Slider 위젯의 onChanged 콜백을 활용하여 값을 변경할 때마다 상태를 업데이트할 수 있습니다.

다음은 실시간으로 값 변경을 반영하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SliderExample(),
    );
  }
}

class SliderExample extends StatefulWidget {
  @override
  _SliderExampleState createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _currentSliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Real-time Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Value: $_currentSliderValue'),
            Slider(
              value: _currentSliderValue,
              min: 0,
              max: 100,
              onChanged: (double value) {
                setState(() {
                  _currentSliderValue = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 onChanged 콜백을 활용하여 Slider의 값이 변경될 때마다 _currentSliderValue를 업데이트하고, 화면에 실시간으로 반영하고 있습니다.

이렇게 하면 Slider의 값이 변경될 때마다 해당 값을 실시간으로 반영할 수 있습니다.