Анимированные виджеты внутри горизонтального ListView

Question

Рассмотрим горизонтально прокручиваемый ListView, где каждый элемент является стеком. У стека есть два виджета, большой синий контейнер внизу и меньший янтарный контейнер сверху. Когда я касаюсь синего Контейнера, янтарный Контейнер должен переместиться вправо за пределы синего, сдвинув остальные элементы в списке вправо. Как я могу это сделать?

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 5,
  itemBuilder: (context, index) {
    return Padding(
            padding: EdgeInsets.only(right: 10.0),
            child: Stack(
              children: <Widget>[
                GestureDetector(
                  child: Container(
                    height: 120,
                    width: 90,
                    color: Colors.blue,
                  ),
                ),
                Container(
                  height: 90,
                  width: 30,
                  color: Colors.amber,
                )
              ],
            ),
          );
  },
),

Скриншоты:

Answer 1

Если все, что вы хотите сделать, это прокрутить содержимое обратно к началу ListView, то следующий код сделает это:

class ScrollAnimation61190061 extends StatefulWidget {
  @override
  _ScrollAnimation61190061State createState() => _ScrollAnimation61190061State();
}

class _ScrollAnimation61190061State extends State<ScrollAnimation61190061> {
  final int _listLength = 5;
  List<EdgeInsets> _itemInsets = [];

  @override
  void initState() {
    _itemInsets = List.generate(_listLength, (index) => null);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: _listLength,
      itemBuilder: (context, index) {
        return Stack(
          children: <Widget>[
            GestureDetector(
              child: Container(
                height: 120,
                width: 90,
                color: Colors.blue,
              ),
              onTap: () {
                setState(() {
                  _itemInsets[index] = EdgeInsets.only(left: 60);
                });
              },
            ),
            Container(
              margin: _itemInsets[index],
              height: 90,
              width: 30,
              color: Colors.amber,
            )
          ],
        );
      },
    );
  }
}