skip to Main Content

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.

2

Answers


  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'),
                  )
                ],
              ),
            ),
          ),
        );
      }
    }
    
    
    Login or Signup to reply.
  2. you can used the carousel_slider

    carousel_slider: ^2.3.1
    

    Example

    ListView( 
            children: [ 
              CarouselSlider( 
                  items: [ 
                      
                  Container( 
                      margin: EdgeInsets.all(6.0), 
                      decoration: BoxDecoration( 
                      color: Colors.grey,
                        borderRadius: BorderRadius.circular(8.0), 
                      ), 
                    ), 
                      
                  Container( 
                      margin: EdgeInsets.all(6.0), 
                      decoration: BoxDecoration( 
                      color: Colors.grey,
                        borderRadius: BorderRadius.circular(8.0), 
                      ), 
                    ),  
                      
                      Container( 
                      margin: EdgeInsets.all(6.0), 
                      decoration: BoxDecoration( 
                      color: Colors.grey,
                        borderRadius: BorderRadius.circular(8.0), 
                      ), 
                    ), 
                      
                    Container( 
                      margin: EdgeInsets.all(6.0), 
                      decoration: BoxDecoration( 
                      color: Colors.grey,
                        borderRadius: BorderRadius.circular(8.0), 
                      ), 
                    ), 
                    Container( 
                      margin: EdgeInsets.all(6.0), 
                      decoration: BoxDecoration( 
                      color: Colors.grey,
                        borderRadius: BorderRadius.circular(8.0), 
                      ), 
                    ), 
      
              ], 
                  options: CarouselOptions( 
                    height: 180.0, 
                    enlargeCenterPage: true, 
                    autoPlay: true, 
                    aspectRatio: 16 / 9, 
                    autoPlayCurve: Curves.fastOutSlowIn, 
                    enableInfiniteScroll: true, 
                  autoPlayAnimationDuration: Duration(milliseconds: 800), 
                    viewportFraction: 0.8, 
                  ), 
              ), 
            ], 
          ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search