动画-使多个容器/小部件对齐的列在AnimatedContainer内部获得动画效果？

Question

我正试图使钢琴砖变得扑朔迷离。

这是瓦片穿过的单个垂直列的代码。

Server.URL

我能够使一个图块通过并在点击时消失，要使两个图块通过，我尝试使用一列图块，但是没有通过AnimatedContainer进行动画处理，我还尝试使用一堆“ tile”包含小块并立即将小块弹出或推入AnimatedContainer的小部件，具体取决于经过的时间或小部件是否消失。

类似这样的东西-

func CallExample(url string) (string) {
  resp, _ := http.Get(url)
  body, _ := ioutil.ReadAll(resp.Body)
  return string(body)
}

func TestCallExample(t *testing.T) {
  ts := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "foo")
  })) 
  defer ts.Close()

  got := CallExample(ts.URL)
  want := "foo"
  if got != want {
    t.Errorf("Got %s, Want %s", got, want)
  }
}

这是将4个垂直列组合在一起的代码：

import 'package:flutter/material.dart';
import 'dart:math';
import 'package:stack/stack.dart' as st;
class Vertical extends StatefulWidget {
  bool f = true;

  Vertical(this.f);

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

class _VerticalState extends State<Vertical> {
  @override
  Widget build(BuildContext context) {


    Function fun = () {


      setState(() {


        widget.f = !widget.f;
        print(widget.f.toString());
      });
    };


    return AnimatedContainer(
      duration: Duration(seconds: Random().nextInt(15)),
      width: MediaQuery.of(context).size.width * 0.25 - 3,
      color: Colors.cyan,
      height: MediaQuery.of(context).size.height,
      child: Pad(context,fun,widget.f),
      alignment: widget.f ? Alignment(-1, -1) : Alignment(-1, 1),
    );
  }
}

Widget d(context) {
  return Container(
      width: 4,
      child: VerticalDivider(
        thickness: 3.5,
        color: Colors.red,
      ));
}

Widget Pad(context, Function g, bool k) {
  return GestureDetector(
    onTap: () {
      g();
    },
    child: Container(
      height: MediaQuery.of(context).size.height * 0.25,
      width: MediaQuery.of(context).size.width * 0.25,
      color: k ? Colors.transparent : Colors.black,
    ),
  );
}

是否有任何更巧妙的方法可以通过“垂直”列中的多个图块，并且每个图块都具有轻敲状态（即在需要时消失）？预先谢谢你！