Flutter: Only Re-render widget where setState() was called - in nested object structure

Question

How Flutter renders the widgets has been described in detail here. It will compare the new with the old widget. Therefore, Flutter usually knows how to re-render the UI in most cases.

In a nested object structure, all parent widgets inevitably change when you change the child, so they seem to be rendered new.

This leads to unattractive visual effects for the user of the app.

Is there a way to re-render only the widget in which SetState () was called?

I tried kinds of this.setState (() {}). I have swapped out the widgets in a stateless class.

Unfortunately, both approaches do not solve the problem.

Widget _createCheckbox(int dataArrayPosition, int elementCurrentPosition, int inputCurrentPosition) { Input inputElement = contextData.data[dataArrayPosition].element[elementCurrentPosition].input[inputCurrentPosition];

return Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Checkbox(
            value: inputElement.checkBoxValue,
            onChanged: (bool newValue) {
              setState(() {
                contextData.data[dataArrayPosition].element[elementCurrentPosition].input[inputCurrentPosition].checkBoxValue = newValue;
              });
            }),
        Text(inputElement.labelForValue),
      ],
    ),
  ],
);

}

Does anyone know a way to re - render only the 'affected' widget in this example when onChanged was called?

`This leads to unattractive visual effects for the user of the app.` what do you mean by that? — Rémi Rousselet, Jun 28 '19 at 13:00
It looks like the display is flickering and the app is about to crash (even if that's not true, but it looks like that). For example, if the user changes the checkbox, this effect occurs. — Markus Bach, Jun 28 '19 at 13:05
That's probably the real issue, not the act of rebuilding parents. — Rémi Rousselet, Jun 28 '19 at 13:15
Yes that's true. The problem is the unsightly effect for the user. The effect still comes from the new rendering of the entire widget. There are also embedded pictures, which are also newly rendered. Here the effect is particularly strong. — Markus Bach, Jun 28 '19 at 13:23
I can not imagine that no one else have problems with this issue. In the examples of Google / Youtube, the nested structures are only used only rendering the widgets one time (News API). What needs to be implemented differently when entering user data in the nested objects, to avoid tue visual effect? — Markus Bach, Jun 28 '19 at 15:20

score 0 · Answer 1 · answered Jul 02 '19 at 06:50

The Flutter Package "Image_Picker" saves photos as variables of type "File". I have converted the foto into a jSON construct. The photos were saved as BASE64. It is possible to have the Base64 construct displayed in a widget. Unfortunately, Flutter does not seem to notice when rendering that it's always the same image, when you use a BASE64 Image. Therefore, the flicker effect occurs if the user enters new data.

This kind of code is working without any problems.

    var picturesTaken = <File>[];

    Widget _showFoto(int currentFoto) {
      return Padding(
          padding: const EdgeInsets.only(bottom: 10.0),
          child: Container(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Center(
                child: Column(
                  children: <Widget>[
                    Image.file(picturesTaken[currentFoto])
                  ],
                ),
              ),
            ),
          )
      );
    }

Flutter: Only Re-render widget where setState() was called - in nested object structure

1 Answers1