Ali-Azmoud/flutter_xlider

The smaller the horizontal size, the less the thumb touches both ends.

kayheypark opened this issue · 0 comments

Want(In Long Width):

스크린샷 2024-02-01 오후 12 54 04

Problem(In Short Width):

스크린샷 2024-02-01 오후 12 55 27
  • You can see difference of two images.
  • How can I get thumb on both ends regardless of horizontal size?

here is my code:

Flexible(
flex: 1,
child: FlutterSlider(
  values: [_lowerValue],
  max: 100,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
  handler: FlutterSliderHandler(
    child: Material(
      type: MaterialType.canvas,
      elevation: 3,
      borderRadius: BorderRadius.circular(10.w),
      child: Container(
        width: 18.w,
        height: 18.w,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(
                'asset/img/chip_empty.png'), // 배경 이미지
          ),
        ),
      ),
    ),
  ),
  trackBar: FlutterSliderTrackBar(
    centralWidget: Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: const [
              Color(0xFFE6E56B),
              Color(0xFFEBA20F),
              Color(0xFFFD1F05),
            ],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            stops: List.from([0.0, 0.30, 1.0]),
          ),
          borderRadius: BorderRadius.circular(50)),
      height: 3.w,
    ),
    inactiveTrackBar: BoxDecoration(
order: Border.all(width: 3.w, color: Colors.white),
        ),
    activeTrackBar:
        BoxDecoration(color: Colors.transparent
  ),
  tooltip: FlutterSliderTooltip(
      disabled: false, //툴팁을 감춤
      textStyle:
          TextStyle(fontSize: 8.w, color: Colors.black),
      boxStyle: FlutterSliderTooltipBox(
          decoration:
              BoxDecoration(color: Colors.white))),
))