Flutter scroll slowly to the bottom of a dynamic Listview

Question

I have a list view that its item may vary each time. I want to make auto scroll for it.

I tried this code

scrollController.animateTo(
      scrollController.position.maxScrollExtent,
      duration: Duration(seconds: 10),
      curve: Curves.easeOut);

It works perfectly for small list view but when the list view items are 100 or more it start moving so fast.

I also tried to make the duration longer when the list view have more items but it mess up

the data isn't a problem I'm getting the data correctly from local db. — Yahya, May 02 '21 at 18:55
are you getting all the data at once? Or you are using pagination? — Ujjwal Raijada, May 02 '21 at 18:56
Yes im getting the data at once and filling the listview then I want It to start scrolling. — Yahya, May 02 '21 at 18:57

Yahya · Accepted Answer · 2021-05-03T15:24:51.970

4

The issue was caused from the animation itself not the duration. I solved it by increasing the duration and setting curve: Curves.linear.

edited May 03 '21 at 15:24

answered May 02 '21 at 20:27

Yahya

210
2
12

Tasnuva Tavasum oshin · Answer 2 · 2021-05-02T19:08:12.647

1

// Declaring the controller and the item size
ScrollController _scrollController;
final itemSize = 100.0;

// Initializing
@override
void initState() {
  _scrollController = ScrollController();
  _scrollController.addListener(_scrollListener);
  super.initState();
}

// Your list widget (must not be nested lists)
ListView.builder(
      controller: _scrollController,
      itemCount: <Your list length>,
      itemExtent: itemSize,
      itemBuilder: (context, index) {
          return ListTile(<your items>);
      },
),

// With the listener and the itemSize, you can calculate which item
// is on screen using the provided callBack. Something like this:
void _scrollListener() {
  setState(() {
    var index = (_scrollController.offset / itemSize).round() + 1;
  });
}

edited May 02 '21 at 19:08

answered May 02 '21 at 17:53

Tasnuva Tavasum oshin

1
1
17
28

No time isn't the problem. I already said that when I set longer time it still works put it moves in a messy way. like it stops then move – Yahya May 02 '21 at 17:58
scrollController.position.maxScrollExtent Change this – Tasnuva Tavasum oshin May 02 '21 at 18:00
Change it to what ? – Yahya May 02 '21 at 18:56
i have changed my answer have a look – Tasnuva Tavasum oshin May 02 '21 at 19:07
The items size aren't static it will change based on the content inside it. Is there any other solution without using the height – Yahya May 02 '21 at 19:16
use custom scroll – Tasnuva Tavasum oshin May 02 '21 at 19:19
No need for that. – Yahya May 02 '21 at 20:26

score 0 · Answer 3 · answered May 02 '21 at 19:06

0

import 'dart:async';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final _controller = ScrollController();
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Timer(
      Duration(seconds: 2),
          () => _controller.animateTo(
            _controller.position.maxScrollExtent,
            duration: Duration(seconds: 2),
            curve: Curves.fastOutSlowIn,
          ),
    );
    return Scaffold(
      body: ListView.builder(itemBuilder:(context, index) {
        return Text('hi');
      },
     controller: _controller,
      )
    );
  }
}

answered May 02 '21 at 19:06

Ujjwal Raijada

867
10
21

This code waits two seconds then it starts scrolling very fast. My problem is with the fast scrolling but its not a time issue – Yahya May 02 '21 at 19:23
1

you can use `Curves.easeIn` or any other class. There are many options available. – Ujjwal Raijada May 02 '21 at 19:39
check https://stackoverflow.com/questions/43485529/programmatically-scrolling-to-the-end-of-a-listview?rq=1 – Ujjwal Raijada May 02 '21 at 19:58
Thank you Ujjwal. I solved it by setting the curve to `Curves.linear`. – Yahya May 02 '21 at 20:25

Flutter scroll slowly to the bottom of a dynamic Listview

3 Answers3