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

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?

CodePudding user response：

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.

CodePudding user response：

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.