flutterdartlistviewscrollautoscroll

How to make a list view with automatic scrolling?


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.


Solution

  • 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'),
                  )
                ],
              ),
            ),
          ),
        );
      }
    }