Flutter Animated List Showing The List Element Twice When Animating Remove Item

Question

I created a list to try an display the issue I am encountering with flutter.

Every time you click on a list item button, the button below it is removed. As you can see from the gif below when you click on the button it creates a second copy of the bottom element.

Paused mid animation it looks like this:

To create the AnimtedList I started with giving it a global key:

final GlobalKey<AnimatedListState> _ListKey = GlobalKey();

Then I create a list of colors like this:

List<Color> listColors = [Colors.orange, Colors.green, Colors.red, Colors.blue, Colors.yellowAccent, Colors.brown,];

Then I have an AnimatedList like this, which has initial size of the listColors length and child of _buildListItem:

AnimatedList(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    key: _ListKey,
    initialItemCount: listColors.length,
    itemBuilder: (context, index, animation) {
                    return _buildListItem(index, animation);
    },
),

This is the build list item method, a SizeTransition that has a child of the List_Element:

    SizeTransition _buildListItem(int index, Animation<double> animation,) {
          return SizeTransition(
            sizeFactor: animation,
            child: List_Element(index),
    );
}

This is the List_Element,the rows of the list with a simple button with color set by the index of the list of colors. In the onPressed method I call the removeFromListFunction to remove the row below.

class List_Element extends StatefulWidget {
      int listIndex;
      List_Element(int listIndex) {
        this.listIndex = listIndex;
      }

      @override
      _List_ElementState createState() => _List_ElementState();
    }

    class _List_ElementState extends State<List_Element> {

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.all(4),
          child: Container(
            width: double.infinity,
            height: 50,
            child: RaisedButton(
              color: listColors[widget.listIndex],
              elevation: 2,
              child: Center(child: Text("List item " + widget.listIndex.toString(), style: TextStyle(fontWeight: FontWeight.bold),),),
              onPressed: (){
                  _removeFromList(widget.listIndex);

              },
            ),
          ),
        );
      }
}

This is the removeFromList function:

void _removeFromList(int index) {
      listColors.remove(int);
      _ListKey.currentState.removeItem(index+1,
      (BuildContext context, Animation<double> animation) {
        return  _buildListItem(index, animation);
      });
    }

I am not sure if it a problem with animated list or more likely my implementation of it.

Thanks for your help

score 2 · Accepted Answer · answered Jun 17 '19 at 07:28

2

void _removeFromList(int index) {
  listColors.remove(int);
  _ListKey.currentState.removeItem(index+1,
  (BuildContext context, Animation<double> animation) {
    //return  _buildListItem(index, animation);
      return  _buildListItem(index + 1, animation);
  });
}

If I'm not mistaken, the reason why this is happening is that you are passing the index of the "currently clicked" button when you are rebuilding the "removed" button. Thus its displaying the clicked button again.

answered Jun 17 '19 at 07:28

DamonAskavio

54
8

Thanks for your response, unfortunately tried that and it just makes the next row do the same thing. – Nicholas Muir Jun 17 '19 at 07:34
`listColors.remove(int);` Just curious is the code above intentional? Maybe you could try `listColors.removeAt(index + 1);` Also since the color is already removed from the list, the _buildListItem will not be able to pick the correct color. – DamonAskavio Jun 17 '19 at 07:44
My suggestion would be to pass the color itself in to your List_Element widget or create a class which contains both the index and the color so that you can pass it in the same way. – DamonAskavio Jun 17 '19 at 07:52
Thanks but that is not it. This a simplified list I made a a much more complicated one which is similar to what you described and no change. – Nicholas Muir Jun 17 '19 at 11:15
Awesome thank you very much! Still trying to work out how this work for actual list of grid buttons but this will help alot. I appreciate the help! – Nicholas Muir Jun 18 '19 at 06:20

Flutter Animated List Showing The List Element Twice When Animating Remove Item

1 Answers1