In List view How to scroll items with its respective index show widget needs animate in certain pixcels only

Question

I have implemented custom horizontal calendar through listview and this listview date & day were showing in every index to 365 days

but how to change when scrolling action reach and changes every month. the title(month & year ) also needs to change with scrollcontroller or anyother way to update the title like given below video

import 'package:flutter/material.dart';

class Calendartimeline extends StatefulWidget {
  @override
  _CalendartimelineState createState() => _CalendartimelineState();
}

class _CalendartimelineState extends State<Calendartimeline> {
  late final ValueNotifier<DateTime> selectedDate;
  late final ValueNotifier<DateTime> datechanged; // TO tracking date

  int currentDateSelectedIndex = 0; //For Horizontal Date
  ScrollController scrollController =
      ScrollController(); //To Track Scroll of ListView

  List<String> listOfMonths = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];

  List<String> listOfDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  @override
  void initState() {
    selectedDate = ValueNotifier(DateTime.now());
    datechanged = ValueNotifier(DateTime.now()
        
        );
    scrollController.addListener(() {
      
    });

    super.initState();
  }

  

  @override
  Widget build(BuildContext context) {
    return
       

        ValueListenableBuilder<DateTime>(
            valueListenable: selectedDate,
            builder: (context, datetime, _) {
              return
                  

                  Column(
                children: [
                  
                  SizedBox(height: 10),
                  

                  Container(
                      margin: EdgeInsets.only(left: 10),
                      height: 150,
                      child: Container(
                          child: ListView.separated(
                        shrinkWrap: true,
                        separatorBuilder: (BuildContext context, int index) {
                          return SizedBox(width: 25);
                        },
                        itemCount: 365,
                        controller: scrollController,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return
                              
                              Column(
                            children: [
                              
                              Container(
                                  height: 25,
                                  margin: EdgeInsets.only(left: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    listOfMonths[DateTime.now()
                                                    .add(Duration(days: index))
                                                    .month -
                                                1]
                                            .toString() +
                                        ',' +
                                        DateTime.now()
                                            .add(Duration(days: index))
                                            .year
                                            .toString(),
                                   
                                    style: TextStyle(
                                        fontSize: 18,
                                        fontWeight: FontWeight.w800,
                                        color: Colors.indigo[700]),
                                  )),
                            
                              InkWell(
                                onTap: () {
                                  setState(() {
                                    currentDateSelectedIndex = index;
                                    datetime = DateTime.now()
                                        .add(Duration(days: index));
                                    selectedDate.value = DateTime.now()
                                        .add(Duration(days: index));
                                  });
                                  print(index);
                                },
                                child: Container(
                                  height: 80,
                                  width: 60,
                                  alignment: Alignment.center,
                                 
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      
                                      SizedBox(
                                        height: 5,
                                      ),
                                      Text(
                                        DateTime.now()
                                            .add(Duration(days: index))
                                            .day
                                            .toString(),
                                        style: TextStyle(
                                            fontSize: 22,
                                            fontWeight: FontWeight.w700,
                                            color:
                                                
                                                Colors.grey),
                                      ),
                                      SizedBox(
                                        height: 5,
                                      ),
                                      Text(
                                        listOfDays[DateTime.now()
                                                    .add(Duration(days: index))
                                                    .weekday -
                                                1]
                                            .toString(),
                                        style: TextStyle(
                                            fontSize: 16,
                                            color:
                                                
                                                Colors.grey),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          );
                        },
                      )
                          
                          ))
                ],
               
              );
            });
  }
} 

Expected like above gif date & day ( same needs for the title)

Answer 1

try to use ScrollablePositionedList package https://pub.dev/packages/scrollable_positioned_list

with its Listener you must be able to change the title when the last item of a month is passing by