Range Slider

Flutter의 기본 위젯인 RangeSlider에 대해서 알아보려고 한다.

슬라이더 형식의 범위 선택기이며, 다양하게 커스텀하여 사용할 수 있다.

기본적인 사용법은 values 파라미터에 RangeValues(min, max)값과 onChanged 함수를 필수 값으로 작성하면 된다.

RangeSlider(
	max: 100,
	values: value.rangeValues,
	onChanged: (v) => value.changedRangeValues(rangeValues: v),
                ),

class SliderProvider extends ChangeNotifier {
  RangeValues _rangeValues = const RangeValues(0.0, 100.0);

  void changedRangeValues({
    required RangeValues rangeValues,
  }) {
    _rangeValues = rangeValues;
    notifyListeners();
  }

  RangeValues get rangeValues => _rangeValues;
}

values는 double값을 사용하고 있으며 위의 소스코드를 실행해보면 최소값과 최대값을 같은 값으로 사용할 수 없다. 특정 구간에 따라서 제어를 하고 싶거나 같은 값을 주고 싶다면 division 파라미터를 사용하면 된다.

 divisions: 10,

구간 설정 인디케이터 상단에 라벨을 보여주고 싶다면 labels 파라미터에 RangeLabels 값을 넣어준다.

labels: RangeLabels(value.rangeValues.start.toString(),
          			value.rangeValues.end.toString())

색상을 변경하는 방법에는 두 가지 방법이 있는데 먼저 RangeSlider의 파라미터 값으로 하는 방법이 있고, SliderTheme을 사용하여 테마를 오버래핑하여 변경할 수 있다.

inactiveTrackColor: Colors.deepOrange.shade100,
activeTrackColor: Colors.deepOrange,

SliderTheme(
 data: SliderThemeData(
    inactiveTrackColor: Colors.deepOrange.shade100,
    activeTrackColor: Colors.deepOrange,
  ),
 child: RangeSlider(
      max: 100,
      divisions: 10,
      labels: RangeLabels(value.rangeValues.start.toString(),
         value.rangeValues.end.toString()),
values: value.rangeValues,
onChanged: (v) => value.changedRangeValues(rangeValues: v),
),
),

SliderThemeData 파라미터로 다양하게 커스텀하여 사용하면 된다.

inactiveTrackColor: Colors.green.shade100,
activeTrackColor: Colors.green,
valueIndicatorColor: Colors.green,
thumbColor: Colors.white,
trackHeight: 10,
rangeThumbShape: const RoundRangeSliderThumbShape(
                enabledThumbRadius: 14,
				elevation: 3,
),

RangeSlider 위젯을 사용하다 보면 다이얼로그, 바텀시트 또는 페이지 뷰와 같이 스크롤이 중첩되는 곳에서 터치감이나 드래그 스크롤링이 제대로 작동하지 않는 것을 알 수있다.
이러한 이슈를 해결하는 방법 중에 하나가 인디게이터의 터치영역을 넓게하거나 아니면 Track의 바깥 영역 뿐만아니라 안쪽 영역에도 터치 기능을 넣어 해결할 수 있다.

SliderThemeData의 thumbSelector 파라미터의 값을 제어하여 사용하면 된다.

thumbSelector: CustomRangeSliderSelector._customRangeThumbSelector,

class CustomRangeSliderSelector {
  static final RangeThumbSelector _customRangeThumbSelector = (
    TextDirection textDirection,
    RangeValues values,
    double tapValue,
    Size thumbSize,
    Size trackSize,
    double dx,
  ) {
    final double start = (tapValue - values.start).abs();
    final double end = (tapValue - values.end).abs();
    if (start < end) {
      return Thumb.start;
    } else if (start > end) {
      return Thumb.end;
    } else if (start == end) {
      if (tapValue < values.start) {
        return Thumb.start;
      } else {
        return Thumb.end;
      }
    } else {
      return Thumb.start;
    }
  };
}

RangeSlider 기본 위젯에도 다양한 기능을 제공하고 있지만 RangeSlider기능을 활용하여 Syncfusion 사에서 개발한 SfRangeSlider에 대해서도 다음에 작성할 예정이다.

Result