Flutter 'setState' redraws the entire screen instead of just the widget

Question

My code is as follows:

SfSlider(
                  minorTicksPerInterval: 0,
                  inactiveColor: Colors.grey[300],
                  tooltipShape: const SfPaddleTooltipShape(),
                  activeColor: _pictureQuality<500? Colors.deepOrange : _pictureQuality>500 && _pictureQuality<800? Colors.green : Colors.deepOrange,
                  edgeLabelPlacement: EdgeLabelPlacement.auto,
                    showLabels: true,
                    showTicks: true,
                    enableTooltip: true,
                    stepSize: 10,
                    showDividers: true,
                    interval: 10.0,
                    shouldAlwaysShowTooltip: false,
                    min: 50.0,
                    max:120.0,
                    value: _pictureQuality/10,
                    onChanged: (value) => setState(()=> _pictureQuality = value.toInt() * 10)),

I have a form with a slider. I am using the SfSlider plugin from pub.dev.

As you can see I call setState on pictureQuality which is only used (i.e _pictureQuality) in SfSlider, but my entire build method is triggering when I call the setState on that variable. How can I avoid this entire rebuild please?

Since the state is present in the parent of the SfSlider Widget, setting the state would cause the build method of the parent to be called. — Mohammad Kurjieh, Jan 01 '23 at 19:38

eamirho3ein · Answer 1 · 2023-01-01T19:39:06.330

You can use StatefulBuilder like this:

StatefulBuilder(
        builder: (context, innerSetState) {
          return SfSlider(
              minorTicksPerInterval: 0,
              inactiveColor: Colors.grey[300],
              tooltipShape: const SfPaddleTooltipShape(),
              activeColor: _pictureQuality<500? Colors.deepOrange : _pictureQuality>500 && _pictureQuality<800? Colors.green : Colors.deepOrange,
              edgeLabelPlacement: EdgeLabelPlacement.auto,
                showLabels: true,
                showTicks: true,
                enableTooltip: true,
                stepSize: 10,
                showDividers: true,
                interval: 10.0,
                shouldAlwaysShowTooltip: false,
                min: 50.0,
                max:120.0,
                value: _pictureQuality/10,
                onChanged: (value) => innerSetState(()=> _pictureQuality = value.toInt() * 10));
        },
      ),

StatefulBuilder used when you have expensive widget and you don't want to update all the widget and want just update part of it. setState update the StatefulWidget's builder, but when you use StatefulBuilder, its give you another builder to update just its child.

more about StatefulBuilder.

Thanks I will try this. But I would like to know the reason for this behaviour as well, my understanding is that setState should only update widgets using the variable it is called upon — Damandroid, Jan 01 '23 at 19:39
I was thinking about this and want to ask, as the entire build method is rebuild anyways, what is the difference between calling setState( () {} ) and SetState((){variable update})? — Damandroid, Jan 06 '23 at 22:20
@Damandroid if you update the variable then call setState is not difference than update the variable inside SetState. also remember using StatefulBuilder give you the power to avoid rebuilding the entire build method. — eamirho3ein, Jan 07 '23 at 06:15

score 0 · Answer 2 · answered Jan 01 '23 at 19:39

0

If your widget is heavy, you separate the context(create new widget) for SfSlider. Also, you can use ValueNotifier with ValueListenableBuilder if this is the only SfSlider is updating on current widget.

answered Jan 01 '23 at 19:39

Md. Yeasin Sheikh

54,221
7
29
56

Flutter 'setState' redraws the entire screen instead of just the widget

2 Answers2

Linked