title: Change the color of current top visible item in ListView - Flutter
body: <p>I want to have the top visible on screen item in a list change color as the user scrolls through a list. </p>
  
  <p>The closest I've got is with the pluggin ScrollablePositionedList:
  <a href="https://pub.dev/packages/scrollable_positioned_list" rel="nofollow noreferrer">https://pub.dev/packages/scrollable_positioned_list</a></p>
  
  <p>The first item in the list now changes color OR whichever item is at the top screen when I hot reload. But they don't do it in real time as I scroll. </p>
  
  <p>I would really appreciate any help. Please find the relevant code below. Thanks in advance!</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import 'package:scrollviewexperiment/models/place_data.dart';
  import 'package:scrollviewexperiment/widgets/place_tile.dart';
  import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
  
  class PlacesList extends StatefulWidget {
    @override
    _PlacesListState createState() =&gt; _PlacesListState();
  }
  
  class _PlacesListState extends State&lt;PlacesList&gt; {
    final ItemPositionsListener itemPositionsListener =
        ItemPositionsListener.create();
  
    ItemScrollController _itemScrollController = ItemScrollController();
    int currentIndex = 0;
  
  
  
    @override
    void initState() {
      super.initState();
      currentVisibleIndex();
    }
  
    @override
    Widget build(BuildContext context) {
      return Consumer&lt;PlaceData&gt;(
        builder: (context, placeData, child) {
          return ScrollablePositionedList.builder(
            itemCount: placeData.placeCount,
            itemPositionsListener: itemPositionsListener,
            itemBuilder: (context, index) {
              final place = placeData.places[index];
              return Card(
                color: index == currentIndex ? Colors.blue : Colors.white,
                elevation: 2.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0)),
                child: PlaceTile(
                  placeName: place.name,
                  distance: place.distance,
                ),
              );
            },
          );
        },
      );
    }
  
    currentVisibleIndex() {
      itemPositionsListener.itemPositions.addListener(() {
        int min;
        if (itemPositionsListener.itemPositions.value.isNotEmpty) {
          min = itemPositionsListener.itemPositions.value
              .where((ItemPosition position) =&gt; position.itemTrailingEdge &gt; 0)
              .reduce((ItemPosition min, ItemPosition position) =&gt;
                  position.itemTrailingEdge &lt; min.itemTrailingEdge
                      ? position
                      : min)
              .index;
          print('Min Index $min');
          currentIndex = min;
        }
      });
    }
  }
  </code></pre>