Repository navigation
NestedScrollView's use of PrimaryScrollController breaks when there are multiple inner ScrollPositions #40740
Description
Other instances of these issues we have seen reported:
- RefreshIndicator syncs scrollposition across tabs when using TabbarView with AutomaticKeepAliveClientMixin inside NestedScrollView #62833
- Combining NestedScrollView with TabBarView has problems. #81619
- NestedScrollView flutter_gallery Tabs Sample the Scroll state is not right when tab the tabbar #21868
- Using NestedScrollView, TabBarView and AutomaticKeepAliveClientMixin will scroll other scroll views in the tab. #36419
Hello guys,
I wrote a very basic app that has a SliverAppBar and 3 tabs wrapped inside NestedScrollView.
Whenever I scrolling the list up and the app bar showing, all other scroll position is reset.
here's my code:
import 'dart:io';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
),
home: NewsScreen(),
debugShowCheckedModeBanner: false,
);
}
}
class NewsScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() => _NewsScreenState();
}
class _NewsScreenState extends State<NewsScreen> {
final List<String> _tabs = <String>[
"Featured",
"Popular",
"Latest",
];
@override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
body: DefaultTabController(
length: _tabs.length,
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
child: SliverSafeArea(
top: false,
bottom: Platform.isIOS ? false : true,
sliver: SliverAppBar(
title: Text('Tab Demo'),
floating: true,
pinned: true,
snap: true,
forceElevated: innerBoxIsScrolled,
bottom: TabBar(
tabs: _tabs
.map((String name) => Tab(text: name))
.toList(),
),
),
),
),
];
},
body: TabBarView(
children: _tabs.map((String name) {
return SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
return true;
},
child: CustomScrollView(
key: PageStorageKey<String>(name),
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView
.sliverOverlapAbsorberHandleFor(context),
),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
height: 150,
width: double.infinity,
color: Colors.blueGrey,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Text('$name $index')
],
),
),
SizedBox(
height: 8,
)
],
);
},
childCount: 30,
),
),
),
],
),
);
},
),
);
}).toList(),
),
),
),
),
);
}
}Steps to Reproduce
- Featured -> Scroll down to 5 -> Change Tab Popular -> Scroll down to 7 -> Change Tab Latest -> Scroll up until app bar shown -> Change to other Tab. (*on both ios/android)
- Featured -> Scroll down to 5 -> Change Tab Popular -> Scroll down to 7 -> Change Tab Latest -> Scroll down to 7 -> Change back to Tab Featured Scroll up to 4 -> Change to other Tab. (*on android only)
*above will reset the scroll position of all tab bar view to 0
Analyzing cwbflutter...
No issues found! (ran in 4.8s)
[√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 10.0.18362.356], locale en-MY)
• Flutter version 1.9.1+hotfix.2 at C:\Users\LENOVO-Workstation\flutter
• Framework revision 2d2a1ffec9 (11 days ago), 2019-09-06 18:39:49 -0700
• Engine revision b863200c37
• Dart version 2.5.0
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at C:\Users\LENOVO-Workstation\AppData\Local\Android\Sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-28, build-tools 28.0.3
• ANDROID_HOME = C:\Users\LENOVO-Workstation\AppData\Local\Android\Sdk
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
• All Android licenses accepted.
[√] Android Studio (version 3.5)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 39.0.3
• Dart plugin version 191.8423
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
[√] VS Code (version 1.35.1)
• VS Code at C:\Users\LENOVO-Workstation\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.4.1
[√] VS Code, 64-bit edition (version 1.38.1)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.4.1
[√] Connected device (1 available)
• Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)
• No issues found!
Activity
[-]Scroll position for all tabview being reset when scrolling up inside NestedScrollView[/-][+]Scroll position for all CustomScrollView inside TabBarView being reset when scrolling up to show SliverAppBar inside NestedScrollView[/+]escamoteur commentedon Sep 18, 2019
This is expected behaviour because TabBarView does not preserve the state of its children. It has nothing to do with that there is a SliverAppBar.
According to https://api.flutter.dev/flutter/widgets/PageStorageKey-class.html you only assign the PageStorage keys to the ScrollView. you also assigned them to your TabBar, maybe that is a problem.
azuddin commentedon Sep 18, 2019
removed the key on the tab bar, the problem still remain
[-]Scroll position for all CustomScrollView inside TabBarView being reset when scrolling up to show SliverAppBar inside NestedScrollView[/-][+]Scroll positions for all CustomScrollViews inside TabBarViews is reset when scrolling up inside NestedScrollView[/+]escamoteur commentedon Sep 18, 2019
Have you tried if that also happens if you don't use a NestedScrollView and place the tabs outside of the CustomScrollView?
azuddin commentedon Sep 18, 2019
yes i tried and the tab bar working fine like so:
the problem is with NestedScrollView i think. I follow this example from the documentation, also facing same issue (which is the scroll position for all tab will be reset whenever any tab scrolled to top). https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html#widgets.NestedScrollView.1
escamoteur commentedon Sep 18, 2019
Thanks for verifying this.
azuddin commentedon Oct 16, 2019
Any progress on a fix for this?
@escamoteur
Cheers
escamoteur commentedon Oct 23, 2019
@azuddin unfortuntely not
96 remaining items
yuukiw00w commentedon Jul 18, 2024
@Piinks
Why was the priority of this issue lowered to P3?
I believe this issue is a critical bug and requires a prompt fix.
If my proposed workaround is acceptable, could it be officially adopted?
My proposed workaround involves modifying the NestedScrollView. If this is adopted, it will become difficult to incorporate official changes to the NestedScrollView. Therefore, this workaround is temporary until the official changes are reflected, and it is desirable to have it officially adopted as soon as possible.
Junesui commentedon Aug 3, 2024
Any update in this issue?
rusyaev-dk commentedon Aug 3, 2024
Ugh, no updates to this issue :(
junesui912 commentedon Sep 2, 2024
2024 is almost over. This problem has lasted for five years. Doesn't Flutter have any solution yet?
wow-222 commentedon Oct 27, 2024
This problem still exists...
Fix `NestedScrollView` inner position logic (#157756)
nate-thegrate commentedon Nov 4, 2024
I'd be super happy if all 5 of these were completely resolved by this 1 change, but if there's a bug that still needs to be looked at, feel free to open a new issue.
github-actions commentedon Nov 18, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.AlexV525 commentedon Nov 19, 2024
These 4 issues are not resolved based on the statement: #159123