How to make a list view with automatic scrolling?

Question

I want to create a horizontal list view that scrolls automatically without user intervention at a certain speed. Also, this scroll should be done infinitely and the list view should be repeated.

In the search I did, usually the automatic scrolling was to scroll to a specific item, but I did not find the automatic scrolling until the end of the list.

Answer 1

Here is how you can achieve your desired output.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final ScrollController _scrollController;
  @override
  void initState() {
    _scrollController = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      double minScrollExtent2 = _scrollController.position.minScrollExtent;
      double maxScrollExtent2 = _scrollController.position.maxScrollExtent;
      animateToMaxMin(
        maxScrollExtent2,
        minScrollExtent2,
        maxScrollExtent2,
        4, ///How fast or slow your widget's should move
        _scrollController,
      );
    });
    super.initState();
  }

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

  animateToMaxMin(
    double max,
    double min,
    double direction,
    int seconds,
    ScrollController scrollController,
  ) {
    scrollController
        .animateTo(
      direction,
      duration: Duration(seconds: seconds),
      curve: Curves.linear,
    )
        .then((value) {
      direction = direction == max ? min : max;
      animateToMaxMin(max, min, direction, seconds, scrollController);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            controller: _scrollController,
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            children: const [
              SizedBox(
                height: 100,
                width: 100,
                child: Text('1'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('2'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('3'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('4'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('5'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('6'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('7'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('8'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('9'),
              ),
              SizedBox(
                height: 100,
                width: 100,
                child: Text('10'),
              )
            ],
          ),
        ),
      ),
    );
  }
}