0

This is a bit difficult for me to explain Idk if this is a bug but I have this list of stateful widgets which are a bunch of large input forms, a new form can be created and inserted into the list using a button that exists on each individual form which inserts the new form right after the form that was clicked. These forms are displayed in a vertical scrollable column. Whenever I create a new form the states seem to get mixed up. Say for example the list looks like [Form(state2), Form(state4), Form(state3)], say I click the add button on the first form (So the new form should be added at index 1), the list then looks like this: [Form(state2), Form(state4), Form(state3), Form(state1)] even though it should look like [Form(state2), Form(state1), Form(state4), Form(state3)] as I am specifically inserting into that index. I made sure the objects were correctly being moved in the list by giving them an ID and printing it and they seem to move correctly with that ID but the states get completely messed up.

To sum up, the issue is that when I insert a stateful widget into a specific index, all widgets before that index behave normally, but then the inserted widget takes the state of the widget inhabiting the index it is trying to occupy, and it starts this chain of copying until the very last element has the default state.

I couldn't really do a minimal reproducible example but here are some of the chunks of code responsible for the handling of the list.

  void colorAdditionOnClick(ColorAdditionForm form) {
    setState(() {
      int index = _colorAdditionForms.indexOf(form)+1;
      final newForm = ColorAdditionForm(
        isPrimary: false,
        onFormAddition: colorAdditionOnClick,
        onImageSelection: (_) {},
        onColorSelection: (color) {
          setState(() {
            _colorAdditionFormsColors[index] = color;
          });
        }
      );
      _colorAdditionForms.insert(index, newForm);
    });
  }

This is the function called after the form addition button is clicked on any form. I have made sure that the list elements are moving correctly and that the objects are staying the same after being moved, so why are the states getting mixed up?

Ahmed
  • 43
  • 7
  • have you tried to add a unique `key` to your forms? – Hamed Aug 01 '23 at 02:00
  • 2
    im not sure i can get your explanation. But there are 2 probability. Since you are use `Listview` you have to handle the desctructiion ( read here on destruction mitigation https://api.flutter.dev/flutter/widgets/ListView-class.html ), Second probability is, you have to specify the `ValueKey` of each form to avoid assign same value to the child. – pmatatias Aug 01 '23 at 02:04
  • I had already handled the destruction mitigation as when I used a `PageView` to display the forms, their states would get reset on scroll. I switched the layout to just a scrollable column to simplify and tried setting a key with `ValueKey` and it worked perfectly. Now when I tried again to use a `PageView` to scroll between the forms it seems to reset the states whenever I create a new form (Even though the forms are kept alive through `AutomaticKeepAliveClientMixin` because they don't get reset on scroll.) – Ahmed Aug 01 '23 at 11:53

0 Answers0