使用带有 GetX/Obx 的 Slider 小部件

Question

How can I use the Slider Widget with GetX/Obx?

class Slider1 extends StatelessWidget {
  const Slider1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SliderController sx = Get.put(SliderController());

    return SizedBox(
      child: Column(children: [
        Obx(
          () => Slider(
            value: sx.range,
            min: 0,
            max: 255,
            divisions: 255,
            label: sx.range.round().toString(),
            onChanged: (double value) {
              sx.setRange(value);
            },
          ),
        )
      ]),
    );
  }
}

class SliderController extends GetxController {
  double range = 255.obs as double;

  void setRange(double range) {
    this.range = range;
  }
}

Like this i get,

_CastError (type 'RxInt' is not a subtype of type 'double' in type cast)

Answer 1

According to your way of implementing, The only Mistake was in the initialization of the variable. Bellow changes would make it work.

Obx(
                  () => Slider(
                    value: sx.range.value,
                    min: 0.0, //initialized it to a double 
                    max: 255.0,  //initialized it to a double 
                    divisions: 255,
                    label: sx.range.round().toString(),
                    onChanged: (double value) {
                      sx.setRange(value);
                    },
                  ),
                )

Changes in the controller.

class SliderController extends GetxController {
  Rx<double> range = 255.0.obs;  //again initialized it to a Rx<double>

  void setRange(double range) {
    this.range.value = range;  //updating the value of Rx Variable. 
  }
}

Answer 2

Meanwhile i was trying a different approach

class SliderText extends StatelessWidget {
  const SliderText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: GetBuilder<SliderController>(
        init: SliderController(),
        builder: (ctrl) => SizedBox(
          child: Text('Sliding Value: ${ctrl.range}'),
        ),
      ),
    );
  }
}

//--------------------------------------------------------------
class SliderController extends GetxController {
  static SliderController get to => Get.find();
  double range = 255;

  void setRange(double range) {
    this.range = range;
    update();
  }
}

@Krish Bhanushali, which one it is better?