Combining NestedScrollView with TabBarView has problems. (AutomaticKeepAliveMixin, Scroll Position, Laggy Tab Change Animation, PageStorageKey) #71289
Description
When I use a TabBarView inside a NestedScrollView, there are 2 different results both having different problems.
- If I use AutomaticKeepAliveMixin to keep the inner scrollers (and each of their children built by
builder:methods), they are kept alive and when changing between the tabs, there are no lags in animation.
However, any scrolling of one of the inner scrollers also affects others and the individual scroll positions are not obeyed. Even though I use different PageStorageKey() for all of the scrollers, if AutomaticKeepAliveMixin is applied, scroll positions are problematic.
- If I don't apply AutomaticKeepAliveMixin to the inner scrollers, scroll positions have no issues and work as expected. However, this time, because each of the inner scrollers (and their respective children) is completely rebuilt whenever a tab change occurs.
When there are relatively fewer items inside inner scrollers (like 20-30 items per tab), TabBarView tab change animations are fluid and no issues. However, when after a user scrolls and fills lots of children into inner scrollers, then tab change becomes very laggy. This happens because the inner scrollers build from scratch.
I have to ensure that both the tab change animation is not laggy (inner scrollers are not built from scratch every time the TabBarView changes) and the scroll positions of all of the inner scrollers kept separately (do not affect each other).
This is an urgent problem at the moment.
flutter doctor --verbose
Click here to see
[✓] Flutter (Channel beta, 1.23.0-18.1.pre, on Mac OS X 10.15.5 19F101 x86_64, locale tr-TR)
• Flutter version 1.23.0-18.1.pre at /Users/*****/flutter
• Framework revision 198df796aa (6 weeks ago), 2020-10-15 12:04:33 -0700
• Engine revision 1d12d82d9c
• Dart version 2.11.0 (build 2.11.0-213.1.beta)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/*****/Library/Android/sdk
• Platform android-29, build-tools 29.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
• CocoaPods version 1.9.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.5)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
[✓] Connected device (3 available)
• iPhone 8 (mobile) • B53B348C-20FE-4920-A0FE-C869D8E798EB • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-1 (simulator)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 86.0.4240.198
! Error: ***** is not connected. Xcode will continue when ****** is connected. (code -13)
• No issues found!