How to Programmatically Scrolling to the End of a ListView in Flutter?

· 4 min read
How to Programmatically Scrolling to the End of a ListView
How to Programmatically Scrolling to the End of a ListView

A ListView is a scrollable collection of widgets organized linearly in Flutter. Additionally, it is the scrolling widget that is used the most. So, we will examine what the ListView widget in Flutter is in this article.

The ListView Widget in Flutter fulfils the necessary tasks by placing the elements inside it in the correct order according to the Flutter developer requirements.

ListViews Widgets come in the following four types:

ListView()
ListView.builder()
ListView.separated()
ListView.custom()

Learn more about the listview widget and its type for more details.
In our code, we sometimes need to scroll the list view to the Top or bottom (programmatically). So, in this article, We will learn how to scroll down to the bottom of a ListView in Flutter.

To manage our ListView, we will want a ScrollController.

ScrollController _scrollController = ScrollController();

To jump listview from top to bottom, you can use the below snippet.

onPressed: () async {
           SchedulerBinding.instance?.addPostFrameCallback((_) {
                 _scrollController.animateTo(
                 _scrollController.position.maxScrollExtent,
                 duration: const Duration(milliseconds: 1),
                 curve: Curves.fastOutSlowIn);
                 });
          },

To jump listview from bottom to Top, you can use the below snippet.

onPressed: () async {
           SchedulerBinding.instance?.addPostFrameCallback((_) {
                 _scrollController.animateTo(
                 _scrollController.position.minScrollExtent,
                 duration: const Duration(milliseconds: 1),
                 curve: Curves.fastOutSlowIn);
                 });
          },

Let’s see a complete example of a scrolling list view of both sides.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Coflutter'),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  child: const Text('To Top'),
                  onPressed: () async {
             SchedulerBinding.instance?.addPostFrameCallback((_) {
                      _scrollController.animateTo(
                          _scrollController.position.minScrollExtent,
                          duration: const Duration(milliseconds: 1),
                          curve: Curves.fastOutSlowIn);
                    });
                  },
                ),
                ElevatedButton(
                  child: const Text('To Bottom'),
                  onPressed: () async {
                 SchedulerBinding.instance?.addPostFrameCallback((_) {
                      _scrollController.animateTo(
                          _scrollController.position.maxScrollExtent,
                          duration: const Duration(milliseconds: 1),
                          curve: Curves.fastOutSlowIn);
                    });
                  },
                ),
              ],
            ),
            Expanded(
              child: ListView.builder(
                controller: _scrollController,
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: ListTile(
                      title: Text("Index : $index"),
                    ),
                  );
                },
              ),
            ),
            const Divider(),
          ],
        ));
  }
}

Output:

How to Programmatically Scrolling to the End of a ListView
Programmatically Scrolling to the End of a ListView

Conclusion:

We have learned an exciting ListView feature in this article that you may have seen on multiple websites and blogs. We as a leading Flutter business app development company known for custom application solutions for small, medium and large enterprises. Consult our developers for productive and operational app solutions. So now you can add the same functionality to your app. Hope you like this article.

Flutter Developers from Flutter Agency

Leave a comment

Your email address will not be published. Required fields are marked *