Home Flutter Books Flutter Apprentice

A
Appendix A: Chapter 5 Solution 1 Written by Vincent Ngo

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

First, you need to make ExploreScreen a StatefulWidget because you need to preserve the state of the scroll controller.

Next, add a ScrollController property in _ExploreScreenState:

late ScrollController _controller;

Then, add a function called scrollListener(), which is the function callback that will listen to the scroll offsets.

void _scrollListener() {
  // 1
  if (_controller.offset >= _controller.position.maxScrollExtent &&
      !_controller.position.outOfRange) {
    print('i am at the bottom!');
  }
  // 2
  if (_controller.offset <= _controller.position.minScrollExtent &&
      !_controller.position.outOfRange) {
    print('i am at the top!');
  }
}

Here’s how the code works:

  1. Check the scroll offset to see if the position is greater than or equal to the maxScrollExtent. If so, the user has scrolled to the very bottom.
  2. Check if the scroll offset is less than or equal to minScrollExtent. If so, the user has scrolled to the very top.

Within _ExploreScreenState, override initState(), as shown below:

@override
void initState() {
  // 1
  _controller = ScrollController();
  // 2
  _controller.addListener(_scrollListener);
  super.initState();
}

Here’s how the code works:

  1. You initialize the scroll controller.
  2. You add a listener to the controller. Every time the user scrolls, scrollListener() will get called.

Within the ExploreScreen’s parent ListView, all you have to do is set the scroll controller, as shown below:

return ListView(
        controller: _controller,
        ...

That will tell the scroll controller to listen to this particular list view’s scroll events.

Finally, add a function called dispose().

@override
void dispose() {
  _controller.removeListener(_scrollListener);
  super.dispose();
}

The framework calls dispose() when you permanently remove the object and its state from the tree. It’s important to remember to handle any memory cleanup, such as unsubscribing from streams and disposing of animations or controllers. In this case, you’re removing the scroll listener.

Hot restart, scroll to the botton and top, and see the printed statements in the Run console:

Performing hot restart...
Syncing files to device iPhone 8...
Restarted application in 1,086ms.
flutter: i am at the bottom!
flutter: i am at the top!
flutter: i am at the bottom!
flutter: i am at the top!

Here are some examples of when you might need a scroll controller:

  • Detect if you’re at a certain offset.
  • Control the scroll movement by animating to a specific index.
  • Check to see if the scroll view has started, stopped or ended.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:

© 2021 Razeware LLC

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.