Как изменить цвет экрана согласно элементу listView

Question

Я хочу сделать горизонтальный просмотр списка и изменение цвета фона, когда новый элемент появляется на экране. Например, this Я не смог сделать это с просмотром списка, потому что я не мог изменить цвет контейнера в соответствии с Индекс текущего элемента Есть идеи о том, как это сделать?

P S. Я создал контейнер анимации, и его дочерний элемент является представлением страницы, но мне нужно представление списка, а не представление страницы

    class _MyHomePageState extends State<MyHomePage> {
  int _index = 0;
  List<Color> colors = [
  Colors.yallow,
  Colors.blue
  ];

  @override
  Widget build(BuildContext context) {
    final restData = Provider.of<ResturantsProvider>(context);
    final rest = restData.rest;

    return Scaffold(
      body: AnimatedContainer(
        duration: Duration(microseconds: 300),
        curve: Curves.linear,
        color: colors[_index],
        child: PageView.builder(
          onPageChanged: (i) {
            setState(() {
              _index = i;
            });
          },
          scrollDirection: Axis.horizontal,
          itemCount: rest.length,
          itemBuilder: (context, index) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 50,
                ),
                LogoHomePage(
                  logoImg: rest[index].logoImg,
                ),
                ResturantListView(
                  restImg: rest[index].restImg,
                  restName: rest[index].restName,
                  restRate: rest[index].restRate,
                  restType: rest[index].restType,
                  time: rest[index].time,
                  color: rest[index].color,
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

Answer 1

используйте inview_notifier_list со списком в контейнере, установите isInViewPortCondition как ваше требование, а затем измените цвет контейнера

Answer 2

Оберните ваши списки детей (каждого) с VisibilityDetector,

VisibilityDetector(
   key: Key("yourKey"),
   onVisibilityChanged: (VisibilityInfo info) {
       //get visibilityInfo here
       //pass the index of child to parent here based on that parent changes color
   },
   child: YourListItemChild();
)