This is possible by using the PageController.postion attribute's drag method, which internally drags the ScrollPosition of the screen. This way, user can intuitively drag the pages like drag halfway and then leave or continue fully.
The idea is inspired from the other post to use the OverScrollNotification but add rather more step to continue intuitive dragging.
- Collect the DragstartDetail when user starts scrolling.
- Listen for OverScrollNotification and start the draging and at the same time update the drag using the
drag.updatewith the DragUpdateDetails from OverscrollNotification method. - On ScrollEndNotification cancel the the drag.
To keep the idea simple I am pasting only build method of the Tabs page.
A fully working example is available in this dart pad.
@override
Widget build(BuildContext context) {
// Local dragStartDetail.
DragStartDetails dragStartDetails;
// Current drag instance - should be instantiated on overscroll and updated alongside.
Drag drag;
return Column(
children: <Widget>[
TabBar(
labelColor: Colors.green,
indicatorColor: Colors.green,
controller: _tabController,
tabs: <Tab>[
const Tab(text: "Dark"),
const Tab(text: "Normal"),
const Tab(text: "Light"),
],
),
Expanded(
child: NotificationListener(
onNotification: (notification) {
if (notification is ScrollStartNotification) {
dragStartDetails = notification.dragDetails;
}
if (notification is OverscrollNotification) {
drag = _pageController.position.drag(dragStartDetails, () {});
drag.update(notification.dragDetails);
}
if (notification is ScrollEndNotification) {
drag?.cancel();
}
return true;
},
child: TabBarView(
controller: _tabController,
children: <Widget>[
Container(color: Colors.green[800]),
Container(color: Colors.green),
Container(color: Colors.green[200]),
],
),
),
),
],
);
}
Old Answer
The above might not handle some edge cases. If you need more control below code provides the same result but you can handle UserScrollNotification. I am pasting this because, it might be useful for others who would like to know which direction the use is scrolling w.r.t the Axis of the ScrollView.
if (notification is ScrollStartNotification) {
dragStartDetails = notification.dragDetails;
}
if (notification is UserScrollNotification &&
notification.direction == ScrollDirection.forward &&
!_tabController.indexIsChanging &&
dragStartDetails != null &&
_tabController.index == 0) {
_pageController.position.drag(dragStartDetails, () {});
}
// Simialrly Handle the last tab.
if (notification is UserScrollNotification &&
notification.direction == ScrollDirection.reverse &&
!_tabController.indexIsChanging &&
dragStartDetails != null &&
_tabController.index == _tabController.length - 1) {
_pageController.position.drag(dragStartDetails, () {});
}
Because its handled as part of OverScrolling for which the overscrolling has to occur. I felt this is good because, user should be intimated of the end of the tabs which otherwise is probably not so intuitive. But the core idea is using the
dragmethod to drag.Optionally you can try wrapping the last tab element with a gesture detector maybe to initiate the drag say likeonTapDown.I think I found a way. Give me some time.. I will perfect it and share.. :)
@MateusFelipe I have updated the answer. This is the best I could do.. Hope it helps you. You still might have to handle more cases. Perhaps you can ask your user for feedback and decide whether this smooth transition makes sense for them. :D
Thanks, man. I got a similar behavior before, but yours is better. The only flaw that both mine and your solution have is that It doesn't work well with fast swipes. Maybe you would like to update your dartpad?
Done.. I would say it has to be played with a lot to handle the drag cancel very well.. Fast dragging is an issue not with our solution but, the gesture fight between pageview and tabview itself.. if they expose an api to actually explicitly stop page view from listening then it can be done.