title: Flutter Animated List Showing The List Element Twice When Animating Remove Item
body: <p>I created a list to try an display the issue I am encountering with flutter.</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/YQcwf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQcwf.gif" alt="enter image description here"></a></p>
  
  <p>Paused mid animation it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/inSO6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/inSO6.png" alt="enter image description here"></a></p>
  
  <p>To create the AnimtedList I started with giving it a global key:</p>
  
  <pre><code>final GlobalKey&lt;AnimatedListState&gt; _ListKey = GlobalKey();
  </code></pre>
  
  <p>Then I create a list of colors like this:</p>
  
  <pre><code>List&lt;Color&gt; listColors = [Colors.orange, Colors.green, Colors.red, Colors.blue, Colors.yellowAccent, Colors.brown,];
  </code></pre>
  
  <p>Then I have an AnimatedList like this, which has initial size of the listColors length and child of _buildListItem:</p>
  
  <pre><code>AnimatedList(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      key: _ListKey,
      initialItemCount: listColors.length,
      itemBuilder: (context, index, animation) {
                      return _buildListItem(index, animation);
      },
  ),
  </code></pre>
  
  <p>This is the build list item method, a SizeTransition that has a child of the List_Element:</p>
  
  <pre><code>    SizeTransition _buildListItem(int index, Animation&lt;double&gt; animation,) {
            return SizeTransition(
              sizeFactor: animation,
              child: List_Element(index),
      );
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>class List_Element extends StatefulWidget {
        int listIndex;
        List_Element(int listIndex) {
          this.listIndex = listIndex;
        }
  
        @override
        _List_ElementState createState() =&gt; _List_ElementState();
      }
  
      class _List_ElementState extends State&lt;List_Element&gt; {
  
        @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);
  
                },
              ),
            ),
          );
        }
  }
  </code></pre>
  
  <p>This is the removeFromList function:</p>
  
  <pre><code>void _removeFromList(int index) {
        listColors.remove(int);
        _ListKey.currentState.removeItem(index+1,
        (BuildContext context, Animation&lt;double&gt; animation) {
          return  _buildListItem(index, animation);
        });
      }
  </code></pre>
  
  <p>I am not sure if it a problem with animated list or more likely my implementation of it.</p>
  
  <p>Thanks for your help</p>