Flutter - How to Programmatically scrolling to the end of a ListView - 2023

In app development, Listview is also the most important widget we use to show a list of data but sometimes hundreds of data or more that time scrolling may become a lengthy process for the user so in this article, I am coming to share with you How to  Scrolling  Programmatically to the End of a ListView.

How to Scrolling end of a ListView without Animation in Flutter:

We can scroll scrolling end of a ListView without Animation like below the example.


_controller.jumpTo(_controller.position.maxScrollExtent);
  

 

Example:

 

class _ErrorgramState extends State<Errorgram> {
  final ScrollController _scrollController = ScrollController();

  void scrollList() {
    _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text("Errorgram"),
        ),
        floatingActionButton: FloatingActionButton.small(
          onPressed: scrollList,
          child: Icon(Icons.arrow_downward),
        ),
        body: ListView.builder(
          controller: _scrollController,
          itemCount: 100,
          itemBuilder: (_, i) => ListTile(
              title: Text(
            'Data $i',
            style: TextStyle(color: Colors.red),
          )),
        ));
  }
}

 

How to Scrolling end of a ListView with Animation in Flutter:

We can scroll scrolling the end of a ListView with Animation like below the example.


 
 _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: Duration(seconds: 2),
      curve: Curves.fastOutSlowIn,
 );

 

Example:

 

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text("Errorgram"),
        ),
        floatingActionButton: FloatingActionButton.small(
          onPressed: scrollList,
          child: Icon(Icons.arrow_downward),
        ),
        body: ListView.builder(
          controller: _scrollController,
          itemCount: 100,
          itemBuilder: (_, i) => ListTile(
              title: Text(
            'Data $i',
            style: TextStyle(color: Colors.red),
          )),
        ));
  }

  void scrollList() {
    _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: Duration(seconds: 2),
      curve: Curves.fastOutSlowIn,
    );
  }

 

Conclusion:

I shared with you easily  How to Programmatically scrolling to the end of a ListView with an example. I hope this article may help you.

 

 

Tags: