Flutter ListWheelScrollView.useDelegate Make Auto Scroll for few seconds

Question

I want to add an auto scrolling system in flutter ListWheelScrollView.useDelegate for few seconds. My ListWheelChildLoopingListDelegate is generating a loop of infinity widgets.

Is it possible to scroll this loop for few seconds by clicking on a button?

My Code is here:

return Container(
  height: 125,
  width: ScreenSize.width * 0.3,
  child: ListWheelScrollView.useDelegate(
    diameterRatio: 1,
    squeeze: 1.8,
    itemExtent: 75,
    physics: FixedExtentScrollPhysics(),
    onSelectedItemChanged: (index) => print(index),
    childDelegate: ListWheelChildLoopingListDelegate(
      children: List<Widget>.generate(
        slotNames.length,
        (index) => Padding(
          padding: const EdgeInsets.all(3.0),
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue,
              ),
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Image.asset(
              "assets/$index.png",
              width: double.infinity,
              height: double.infinity,
            ),
          ),
        ),
      ),
    ),
  ),
);

Current State Sample:

score 2 · Accepted Answer · answered Sep 21 '21 at 09:44

it is very simple you just have to set Timer and a pre-defined function animateToItem for the scroll controller

Declare controller with the initial item

final _controller = FixedExtentScrollController(initialItem: 0);

Declare Timer

 Timer upperSliderTimer;

import 'dart:async' also for Timer

Create a function to start animation in my case I just call it in the initiate function

 void startController() async {
int totalitems = 4; //total length of items
int counter = 0;
if (counter <= totalitems) {
  upperSliderTimer = Timer.periodic(Duration(seconds: 3), (timer) {
    _controller.animateToItem(counter,
        duration: Duration(seconds: 1), curve: Curves.easeInCubic);
    counter++;
    if (counter == totalitems) counter = 0;
  });
}

call the above function in initState

@override
void initState() {
    super.initState();
    startController();
  }

At last ListWheelScrollView with Delegate

ListWheelScrollView.useDelegate(
                      itemExtent: size.height * 0.4,
                      renderChildrenOutsideViewport: false,
                      controller: _controller,
                      squeeze: 0.7,
                      //useMagnifier: true,
                      childDelegate: ListWheelChildBuilderDelegate(
                          childCount: totalitems,
                          builder: (BuildContext context, int itemIndex) {
                            try {
                              return Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.black12,
                                        offset: Offset(2, 3),
                                        blurRadius: 3,
                                        spreadRadius: 3,
                                      )
                                    ],
                                    borderRadius: BorderRadius.circular(5),
                                    image: DecorationImage(
                                      fit: BoxFit.fill,
                                      image: NetworkImage(
                                          'image url'),
                                    ),
                                  ),
                                ),
                              );
                            } catch (e) {
                              return Container(
                                decoration: BoxDecoration(
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black12,
                                      offset: Offset(2, 3),
                                      blurRadius: 3,
                                      spreadRadius: 3,
                                    )
                                  ],
                                  borderRadius: BorderRadius.circular(5),
                                  image: DecorationImage(
                                    fit: BoxFit.fill,
                                    image: AssetImage(
                                        'defualt assets image'),
                                  ),
                                ),
                              );
                            }
                          }),
                    );

thanks for your reply.... I have also found out a more easy solution using provider and randomly create list. — Md. Sabik Alam Rahat, Sep 30 '21 at 07:08

Flutter ListWheelScrollView.useDelegate Make Auto Scroll for few seconds

1 Answers1