Calculate time between displayed item in ListView.builder - [SOLVED]

I want to track user and know his interests and to achieve that i want to know how much time does he spend in each post, Based on this information i will send this data to AI model to analyze it and regenerate posts with user interests.

here is my code

Expanded(
          child: BlocBuilder<EveryNewCubit, EveryNewState>(
            builder: (context, state) {
              if (state is EveryNewSuccess) {
                return ListView.builder(
                    itemCount: state.news.length,
                    itemBuilder: (context, index) {
                      return VisibilityDetector(
                        key: Key(index.toString()),
                        onVisibilityChanged: (info) {
                          print('${state.news[index].title}');   // i want to print time here for each item
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 5,
                                  blurRadius: 7,
                                  offset: const Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: ExploreNewsItem(),
                          ),
                        ),
                      );
                    });
              } else if (state is EveryNewFailure) {
                print(state.failure.toString());
                return CustomErrorWidget(errMessage: state.failure);
              } else {
                return const CustomLoadingIndicator();
              }
            },
          ),
        )

if you know better solution or technique to use in this app i will be grateful
thanks.

I actually used visibility_detector but i can not calculate time for each post.

Finally i found the solution:

Firstly i wrap content of ExploreNewItem with VisibilityDetector instead of wrapping it in ListView

Secondly i declare the timer in item itself this let me calculate each item time instead of one timer for all items.

Like this:

class ExploreNewsItem extends StatefulWidget {
  const ExploreNewsItem({
    super.key,
    required this.imageUrl,
    required this.category,
    required this.title,
    required this.source,
    required this.date,
    required this.content,
  });

  final String imageUrl;
  final String category;
  final String title;
  final String source;
  final String date;
  final String content;

  @override
  State<ExploreNewsItem> createState() => _ExploreNewsItemState();
}

class _ExploreNewsItemState extends State<ExploreNewsItem> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  final stopwatch = Stopwatch();
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => ItemDetailScreen(
                    imageUrl: widget.imageUrl,
                    source: widget.source,
                    title: widget.title,
                    date: widget.date,
                    category: widget.category,
                    content: (widget.content),
                  ))),
      child: VisibilityDetector(
        key: Key(widget.title.toString()),
        onVisibilityChanged: (info) {
          if (info.visibleFraction == 1 && !stopwatch.isRunning) {
            stopwatch.start();
            log(widget.title, name: 'start');
            print(widget.title);
          }
          if (info.visibleFraction < 0.5 && stopwatch.isRunning) {
            log(widget.title, name: 'reset');
            log("${stopwatch.elapsed}", name: "spent time");
            stopwatch.stop();
          }
        },
        child: Container(),),),},},

instead of this:

ListView.builder(
                    itemCount: state.news.length,
                    itemBuilder: (context, index) {
                      return VisibilityDetector(
                        key: Key(index.toString()),
                        onVisibilityChanged: (info) {
                          print('${state.news[index].title}');   // i want to print time here for each item
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 5,
                                  blurRadius: 7,
                                  offset: const Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: ExploreNewsItem(),
                          ),
                        ),
                      );