Question 78408 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search