Scroll multiple scrollable widgets in sync

i managed to sync multiple scrollables by using their offset, utilizing their ScrollNotification.

here's a rough code example:

class _MyHomePageState extends State<MyHomePage> {

  ScrollController _mycontroller1 = new ScrollController(); // make seperate controllers
  ScrollController _mycontroller2 = new ScrollController(); // for each scrollables

  @override
  Widget build(BuildContext context) {
    body:
      Container(
        height: 100,
        child: NotificationListener<ScrollNotification>( // this part right here is the key
          Stack( children: <Widget>[

            SingleChildScrollView( // this one stays at the back
              controller: _mycontroller1,
              child: Column( children: <Widget>[
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
              ],)
            ),
            SingleChildScrollView( // this is the one you scroll
              controller: _mycontroller2,
              child: Column(children: <Widget>[
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
              ],)
            ),
          ]),

          onNotification: (ScrollNotification scrollInfo) {  // HEY!! LISTEN!!
            // this will set controller1's offset the same as controller2's
            _mycontroller1.jumpTo(_mycontroller2.offset); 

            // you can check both offsets in terminal
            print('check -- offset Left: '+_mycontroller1.offset.toInt().toString()+ ' -- offset Right: '+_mycontroller2.offset.toInt().toString()); 
          }
        )
      )
}}

basically each SingleChildScrollView has its own controller. each controller has their own offset values. use the NotificationListener<ScrollNotification> to notify any movement, anytime they are scrolled.

then for each scroll gesture (i believe this is a frame by frame basis), we can add jumpTo() command to set the offsets in anyway we like.

cheers!!

PS. if the list has different length, then the offset will be different and you will get a stack overflow error if you try to scroll past its limit. make sure to add some exceptions or error handling. (i.e. if else etc.)

Thanks for your answer @Chris, I ran into the same problem and built my solution on top of yours. It works over multiple widgets and allows syncronized scrolling from any of the widget in the "group".

---

PSA: This seems to be working fine, but I'm just getting started and this might break in the most fabulous way you could imagine

---

It works using a NotificationListener<ScrollNotification> plus an independent ScrollController for each scrollable Widget that should be synchronized.
The class looks like this:

class SyncScrollController {
  List<ScrollController> _registeredScrollControllers = new List<ScrollController>();

  ScrollController _scrollingController;
  bool _scrollingActive = false;

  SyncScrollController(List<ScrollController> controllers) {
    controllers.forEach((controller) => registerScrollController(controller));
  }

  void registerScrollController(ScrollController controller) {
    _registeredScrollControllers.add(controller);
  }

  void processNotification(ScrollNotification notification, ScrollController sender) {
    if (notification is ScrollStartNotification && !_scrollingActive) {
      _scrollingController = sender;
      _scrollingActive = true;
      return;
    }

    if (identical(sender, _scrollingController) && _scrollingActive) {
      if (notification is ScrollEndNotification) {
        _scrollingController = null;
        _scrollingActive = false;
        return;
      }

      if (notification is ScrollUpdateNotification) {
        _registeredScrollControllers.forEach((controller) => {if (!identical(_scrollingController, controller)) controller..jumpTo(_scrollingController.offset)});
        return;
      }
    }
  }
}

The idea is that you register each widgets ScrollController with that helper, so that it'll have a reference to each widget that should be scrolled. You can do this by passing an array of ScrollControllers to the SyncScrollControllers constructor, or later on by calling registerScrollController and passing the ScrollController as a parameter to the function.
You'll need to bind the processNotification method to the event handler of the NotificationListener. That could probably be all implemented in a widget itself, but I'm not experienced enough for that yet.

Using the class would look something like this:

Creating fields for the scollControllers

  ScrollController _firstScroller = new ScrollController();
  ScrollController _secondScroller = new ScrollController();
  ScrollController _thirdScroller = new ScrollController();

  SyncScrollController _syncScroller;

Initalize the SyncScrollController

@override
void initState() {
  _syncScroller = new SyncScrollController([_firstScroller , _secondScroller, _thirdScroller]);
  super.initState();
}

Example of a complete NotificationListener

NotificationListener<ScrollNotification>(
  child: SingleChildScrollView(
    controller: _firstScroller,
    child: Container(
    ),
  ),
  onNotification: (ScrollNotification scrollInfo) {
    _syncScroller.processNotification(scrollInfo, _firstScroller);
  }
),

Obiously implement the above example for each scrollable widget and edit the SyncController (parameter controller:) and processNotification scrollController parameter (above _firstScroller) accordingly. You might implement some more fail safes, like checking _syncScroller != null etc., above PSA applies :)

I was just facing the same problem, and there's now an official package for that: linked_scroll_controller.

Using that package, you just have to create a master LinkedScrollControllerGroup to keep track of the scroll offset and it'll then provide you separate ScrollControllers (kept in sync) via LinkedScrollControllerGroup.addAndGet().