Flutter: How to move to the last position in a ListView with animation

Question

I'm building a jackpot game in flutter. Actually, I have a Stack with the jackpot background and 3 image assets that change with a Timer.periodic.

I want to make things prettier by animating the change. My initial approach is by using an infinite ListView that keeps adding elements and moves to the last position of the list each time.

How can I achieve this?

This is the part of my code that builds the Jackpot:

class Jackpot extends StatelessWidget {
  final List<String> imgUri;

  Jackpot(this.imgUri);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Expanded(
        flex: 0,
        child: Stack(
          children: [
            Image.asset(
              'src/images/jackpot_long_500.gif',
              height: 300,
              width: 700,
              fit: BoxFit.fill,
            ),
            Positioned(
              left: 35,
              top: 60,
              child: Image.asset(
                imgUri[0],
                height: 180,
                width: 200,
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              left: 256,
              top: 60,
              child: Image.asset(
                imgUri[1],
                height: 180,
                width: 200,
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              left: 470,
              top: 60,
              child: Image.asset(
                imgUri[2],
                height: 180,
                width: 200,
                fit: BoxFit.fill,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And this is the code that changes the images:

_startAnimations(GameArguments args) {
    Timer.periodic(
      Duration(milliseconds: 100),
      (Timer t) {
        print(t.tick);
        setState(() {
          index1 = _random.nextInt(10);
          index2 = _random.nextInt(10);
          index3 = _random.nextInt(10);
          if (t.tick == 50) {
            winner = _random.nextInt(10);
            print('reached t tick = 50');
            index1 = winner;
            index2 = winner;
            index3 = winner;
            t.cancel();
            print(args);
            _applyDesc(args);
            Timer(Duration(seconds: 1), () => _showMyDialog());
          }
        });
      },
    );
  }

It's repetitive and full of bad practces I know. I'm just testing some features.

Thanks in advance for any help!

https://stackoverflow.com/questions/43485529/programmatically-scrolling-to-the-end-of-a-listview — Javeed Ishaq, Nov 06 '20 at 03:35

score 2 · Accepted Answer · answered Nov 06 '20 at 04:38

Create a ScrollController

final _controller = ScrollController();

Assign this to the controller property of your ListView

ListView.builder(
                    
                    controller: _controller,

Code to animate to last position with animation.

_controller.animateTo(
                      _controller.position.maxScrollExtent,
                      curve: Curves.easeOut,
                      duration: const Duration(milliseconds: 500),
                    );

score 1 · Answer 2 · answered Nov 06 '20 at 05:25

if you are need to animate screen after adding element by button(Example).

then,

first is define scroll controller of list.

  ScrollController _scrollController = new ScrollController();

if you are using SingleChildScrollView,

 body: SingleChildScrollView(
        controller: _scrollController,

if you are using ListView,

body: ListView(
            controller: _scrollController,

then,

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () {
 setState(() {
        _scrollController.animateTo(
          _scrollController.position.maxScrollExtent,
          duration: Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
        );
      });
     },
  child: Text("Move To Last"),
)

Flutter: How to move to the last position in a ListView with animation

2 Answers2