Flutter – How to scroll ListView to top or bottom programmatically

ListView is one of the most common widgets in Flutter. Sometimes, we will need to scroll the list view to top or bottom of it in our code (programmatically). In this post, I will show you how to do that through an example.

1. Create a simple list with 2 buttons

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Coflutter'),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                RaisedButton(child: Text('To Top'), onPressed: () {},),
                RaisedButton(child: Text('To Bottom'), onPressed: () {},),
              ],
            ),
            Expanded(
              child: ListView.builder(
                controller: _scrollController,
                itemCount: 20,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 100,
                    width: double.infinity,
                    color: index % 2 == 0 ? Colors.red : Colors.green,
                  );
                },
              ),
            ),
          ],
        )
     );
  }
}

I have just created a simple list with red and green containers. I made a fixed number of item (20), it is big enough to have the scroll. There are 2 buttons on top of screen for scrolling the list later.

2. Create a Controller and attach it to the listview

class HomePage extends StatelessWidget {
  // New code
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    // ... Other code
        child: ListView.builder(
          // New code
          controller: _scrollController,
          itemCount: 20,
          // ... Other code
        );
  }
}

3. Implement onPressed on 2 buttons to scroll the list view

// ... Other code

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    RaisedButton(
      child: Text('To Top'),
      onPressed: () {
        _scrollController.animateTo(
  _scrollController.position.minScrollExtent,
      duration: Duration(milliseconds: 500),
      curve: Curves.fastOutSlowIn);
  },),
  RaisedButton(
    child: Text('To Bottom'),
    onPressed: () {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 500),
        curve: Curves.fastOutSlowIn);
 },),
],),
// ... Other code

Here is the result:

You can find full source code for this demo on Github.

If you are looking for mobile/web Software Engineers to build you next projects, please Contact Nextfunc team here!

Tagged : / /
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x