We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Flutter
  4. Rerendring of slider is not correct when I try change the orientation thru Blockbuilder

Rerendring of slider is not correct when I try change the orientation thru Blockbuilder

Snipped of code

 @override
  Widget build(BuildContext context) {
    return BlocBuilder<TabbedViewBlocBloc, TabbedViewBlocState>(
      builder: (context, state) {
        Widget fn() {
          if (widget.properties['widgetIsVertical']) {
            return Container(
              height: widget.properties['widgetHeight'],
              width: widget.properties['widgetWidth'],
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackHeight: 6.0,
                  inactiveTrackHeight: 4.0,
                  activeTickColor: Colors.red,
                  inactiveTickColor: Colors.black,
                  activeMinorTickColor: Colors.red,
                  inactiveMinorTickColor: Colors.black,
                  inactiveLabelStyle: TextStyle(
                      color: Colors.black,
                      fontSize: widget.properties['widgetFontSize'],
                      fontStyle: FontStyle.italic),
                  activeLabelStyle: TextStyle(
                      color: Colors.red,
                      fontSize: widget.properties['widgetFontSize'],
                      fontStyle: FontStyle.italic),
                ),
                child: SfSlider.vertical(
                  min: widget.properties['widgetMinValue'],
                  max: widget.properties['widgetMaxValue'],
                  value: _value,
                  interval: 20,
                  showLabels: true,
                  showTicks: true,
                  enableTooltip: true,
                  minorTicksPerInterval: 1,
                  stepSize: 10,
                  activeColor: Colors.red,
                  inactiveColor: Colors.black,
                  onChanged: (dynamic newValue) {
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              ),
            );
          } else {
            return Container(
              height: widget.properties['widgetHeight'],
              width: widget.properties['widgetWidth'],
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  activeTrackHeight: 6.0,
                  inactiveTrackHeight: 4.0,
                  activeTickColor: Colors.red,
                  inactiveTickColor: Colors.black,
                  activeMinorTickColor: Colors.red,
                  inactiveMinorTickColor: Colors.black,
                  inactiveLabelStyle: TextStyle(
                      color: Colors.black,
                      fontSize: widget.properties['widgetFontSize'],
                      fontStyle: FontStyle.italic),
                  activeLabelStyle: TextStyle(
                      color: Colors.red,
                      fontSize: widget.properties['widgetFontSize'],
                      fontStyle: FontStyle.italic),
                ),
                child: SfSlider(
                  min: widget.properties['widgetMinValue'],
                  max: widget.properties['widgetMaxValue'],
                  value: _value,
                  interval: 20,
                  showLabels: true,
                  showTicks: true,
                  enableTooltip: true,
                  minorTicksPerInterval: 1,
                  stepSize: 10,
                  activeColor: Colors.red,
                  inactiveColor: Colors.black,
                  onChanged: (dynamic newValue) {
                    setState(() {
                      _value = newValue;
                    });
                  },
                ),
              ),
            );
          }
        }

        return fn();
      },
    );

4 Replies
YG Yuvaraj Gajaraj Syncfusion Team December 27, 2022 01:58 PM UTC

Hi Isosystem,


We are validating your query at our end and we will update further details in one business day on 28 Dec 2022. We appreciate your patience until then.


Regards,

Yuvaraj.


YG Yuvaraj Gajaraj Syncfusion Team December 28, 2022 12:08 PM UTC

Hi Isosystem,


Flutter will compare the previous widget state with the new one before re-rendering. If the two widgets are of the same type, the old state will be preserved. In your sample, you are using a condition to switch between horizontal and vertical slider widgets, which are of the same type. To overcome this issue, you can assign different keys to the widgets. This will allow Flutter to distinguish between the two different types of widgets and prevent the preservation of the old state. We have modified your snippets based on this and shared them below for your reference.


Code snippet:

Key verticalKey = const Key('vertical');

Key horizontalKey = const Key('horizontal');
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: BlocBuilder<MyBloc, MyState>(
builder: (BuildContext context, MyState state) {
Widget fn() {
if (MediaQuery.of(context).orientation == Orientation.portrait) {
return SizedBox(
height: 700,
width: 500,
child: SfRangeSliderTheme(
data: SfRangeSliderThemeData(
// Other required properties
),
child: SfSlider(
key: horizontalKey,
// Other required properties
),
),
);
} else {
return SizedBox(
height: 500,
width: 700,
child: SfRangeSliderTheme(
data: SfRangeSliderThemeData(
// Other required properties
),
child: SfSlider.vertical(
key: verticalKey,
// Other required properties
),
),
);
}
}
return fn();
},
),
),
);
}


Regards,

Yuvaraj




Attachment: f179601_34fa65fe.zip

IS Isosystem December 28, 2022 01:06 PM UTC

Thanks a lot!

The problem was solved.

Regards

Vadym


YG Yuvaraj Gajaraj Syncfusion Team December 29, 2022 04:45 AM UTC

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.


Loader.
Up arrow icon