title: Animating item removal in a grid in Flutter
body: <p>I have a grid of boxes using the <code>Wrap</code> widget (I did not use the <code>GridView</code> as this requires you stating how many items you need in each row ahead of time).</p>
  <p>I want to remove the item when they are clicked, and have all the other items animate to their new position like this: <a href="https://vestride.github.io/Shuffle/adding-removing" rel="nofollow noreferrer">https://vestride.github.io/Shuffle/adding-removing</a> (click on the boxes to see what I mean).</p>
  <p>Here is my code so far without any animation:</p>
  <pre><code>class Boxes extends StatefulWidget {
    @override
    _BoxesState createState() =&gt; _BoxesState();
  }
  
  class _BoxesState extends State&lt;Boxes&gt; {
    var items = [
      {'id': '25', 'name': 'A',},
      {'id': '19', 'name': 'B',},
      {'id': '35', 'name': 'C',},
      {'id': '20', 'name': 'D',},
      {'id': '958', 'name': 'E',},
      {'id': '1278', 'name': 'F',},
      {'id': '500', 'name': 'G',},
    ];
  
    Widget build(BuildContext context) {
      return Container(
        width: double.infinity,
        height: double.infinity,
        child: Wrap(
          alignment: WrapAlignment.center,
          children: [
            for (final item in items)
              Box(
                key: Key(item['id']),
                name: item['name'],
                onDelete: () {
                  setState(() {
                    items.remove(item);
                  });
                },
              )
          ],
        ),
      );
    }
  }
  
  class Box extends StatelessWidget {
    String name;
    Function onDelete;
  
    Box({this.name, this.onDelete, Key key}):
      super(key: key);
  
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: onDelete,
        child: Container(
          color: Colors.lightBlue,
          width: 90,
          height: 90,
          margin: EdgeInsets.all(8),
          child: Center(
            child: Text(name),
          )
        ),
      );
    }
  }
  </code></pre>
  <p>The closest built-in widget I could find is <code>AnimatedList</code>, but that does not work with a grid.
  I also tried animating the width of the deleted box to 0, which did not work as the other boxes just jump into position instead of animating to the new position.</p>
  <p>How would I go about doing this?</p>