[flutter] 플러터 Slider의 값을 다른 페이지로 전달하는 방법은?

08 Dec 2023

flutter

먼저, provider 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그런 다음, Slider의 값을 제공하고 해당 값을 사용할 수 있는 Provider 클래스를 작성합니다.

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

class SliderProvider extends ChangeNotifier {
  double _sliderValue = 0.0;

  double get sliderValue => _sliderValue;

  void setSliderValue(double value) {
    _sliderValue = value;
    notifyListeners();
  }
}

이제, Slider 위젯을 사용하는 화면에서 SliderProvider를 참조하고 값을 변경할 때마다 값을 업데이트하도록 설정합니다.

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

class SliderScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => SliderProvider(),
      child: SliderPage(),
    );
  }
}

class SliderPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var sliderProvider = Provider.of<SliderProvider>(context, listen: false);
    
    return Slider(
      value: sliderProvider.sliderValue,
      onChanged: (newValue) {
        sliderProvider.setSliderValue(newValue);
      },
      min: 0.0,
      max: 100.0,
      divisions: 5,
      label: sliderProvider.sliderValue.round().toString(),
    );
  }
}

마지막으로, 값이 전달될 다른 페이지에서 SliderProvider를 사용하여 값을 가져옵니다.

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

class AnotherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var sliderProvider = Provider.of<SliderProvider>(context);

    return Text('Slider Value: ${sliderProvider.sliderValue}');
  }
}

이제 Slider의 값을 SliderProvider를 통해 다른 페이지로 전달할 수 있습니다.