Flutter - How to sync two or more PageControllers - flutter

Question

In Flutter I can´t assing the same PageController to many PageView. So in need to use two or more PageControllers.
I need to synchronize my ViewPages so that when I slide one another it also slides
How can I sync two or more PageController or PageView?
What I want is every PageView can control others PageView make them all sync no matter which slide.
So if a have A, B and C PageView and I slide A then B and C slides as well... if I slide B then A and C slides... and so on.

Answer 1

You can reference https://github.com/braulio94/menu_flutter
The trick is use NotificationListener to listen ScrollUpdateNotification
and compare two page
_backgroundPageController.page != _pageController.page
code snippet at line 183
new NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) {
if (notification.depth == 0 &&
notification is ScrollUpdateNotification) {
selectedIndex.value = _pageController.page;
if (_backgroundPageController.page != _pageController.page) {
_backgroundPageController.position
// ignore: deprecated_member_use
.jumpToWithoutSettling(_pageController.position.pixels /
_kViewportFraction);
}
setState(() {});
}
return false;
}
full code
https://github.com/braulio94/menu_flutter/blob/master/lib/screens/pager.dart

Answer 2

To sync two pageviews (in case you want to use different viewfractions for example)
create two controllers, upper with view fraction 0,7 and bottom with 1.0
Now to sync add listener to upper and get current scroll offset value.
#override
void initState() {
super.initState();
_controller_upper = new PageController(viewportFraction: 0.7);
_controller_bottom = new PageController();
_controller.addListener(_onScroll);
}
void _onScroll() {
scrollValue = _controller.page;
//page returns value between 0 to 1 for 1st page, 1 to 2 for second and s on, need to multiply it by screen width
_controller_bottom.jumpTo(scrollValue*MediaQuery.of(context).size.width);
}

Answer 3

There is another solution. When you create controllers you can add listeners for each of. In every listener you should describe logic for another controller.
To be more clear I will describe in more detail. If necessary, you can combine the logic into one method, but it will be less clear.
int _previousPage = 0;
bool _isController1 = false;
bool _isController2 = false;
void resetMoveInfo(){
_isController1 = false;
_isController2 = false;
}
void _onController1Scroll() {
if (_isController2)
return;
_isController1 = true;
if (_controller1.page.toInt() == _controller1.page) {
_previousPage = _controller1.page.toInt();
resetMoveInfo();
}
_controller2.position
// ignore: deprecated_member_use
.jumpToWithoutSettling(_controller1.position.pixels * _viewPortFraction);
}
void _onController2Scroll() {
if (_isController1)
return;
_isController2 = true;
if (_controller2.page.toInt() == _controller2.page) {
_previousPage = _controller2.page.toInt();
resetMoveInfo();
}
_controller1.position
// ignore: deprecated_member_use
.jumpToWithoutSettling(_controller2.position.pixels / _viewPortFraction);
}
When you initialize your controller you should add listener for each of them
_controller1 = PageController(
initialPage: _previousPage,
keepPage: false,
viewportFraction: 1)
..addListener(_onController1Scroll);