Challenge

For this intermediate challenge, figure out how to sync the current page of a PageView with the selected item of a ListView, as this demo shows:

Open preview in a separate page

Starter Project

You can grab the starter project for this challenge here:

c007_page_view_sync_list_view_starter.zip
v0.1.0, updated: 2025-02-12

Check the README for how to use it.

Primary Goals

Synchronize the PageView on the left with the ListView on the right, following these rules:

• When the selected page changes in the PageView:

  • Update the selected item in the ListView
  • Scroll to the selected item so it is centered vertically in the ListView

• When an item is selected in the ListView:

  • Update the selected page in the PageView (no animation)
  • Scroll to the selected item so it is centered vertically in the ListView

Hint about Reactive State

To solve the challenge, you need to share some state between the PageView and the ListView, and rebuild/listen to changes reactively. Which built-in Flutter classes can help you with that?

Show moreShow less

• Use ValueNotifier and ValueListenableBuilder 🎯

What You Will Learn

• How to share reactive state between widgets
• How to work with PageView and PageController
• How to work with AutoScrollController from the scroll_to_index package

Useful Links and Resources

Official resources from Flutter.dev:

• scroll_to_index package > Usage
• PageView class
• PageController class
• AutoScrollController class