Overscrolling outer scrollview / SliverAppBar.stretch does not work in NestedScrollView #54059
Comments
|
Issue also exist on flutter doctor -v |
TahaTesser
added
f: scrolling
Piinks
changed the title
|
Thanks for filing this! The reason the stretch does not happen is because the The |
Piinks
modified the milestones:
[DEPRECATED] Goals,
1.20 - June 2020,
1.22 - August 2020
|
I am moving the milestone once last time. I'm currently working on a related issue (#63978) that should help the fix for this follow in short order. That issue is actually a regression in the same area of the codebase that will need changing to resolve this, which is why it's higher priority. :) |
|
@Piinks Thank you for your attention |
|
I've taken a crack at this a few different times and have not found a suitable solution yet. The NestedScrollView bases much more than I though on the assumption that the outer scroll view will never overscroll. I believe this will take a larger refactoring/re-design of the widget in order to support, maybe work we can schedule for in the new year. For now, I won't be actively working on this anymore. |
Preview
complete runnable code sampleimport 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
theme: ThemeData.dark(),
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
body: NestedScrollView(
physics: BouncingScrollPhysics(),
headerSliverBuilder: (context, innerScrolled) => <Widget>[
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context),
sliver: SliverAppBar(
pinned: true,
stretch: true,
title: Text('username'),
expandedHeight: 325,
flexibleSpace: FlexibleSpaceBar(
stretchModes: <StretchMode>[
StretchMode.zoomBackground,
StretchMode.blurBackground,
],
background: Image.network(
'https://i.imgur.com/QCNbOAo.png',
fit: BoxFit.cover)),
bottom: TabBar(
tabs: <Widget>[Text('test1'), Text('test2')])),
)
],
body: TabBarView(children: [
Center(
child: Builder(
builder: (context) => CustomScrollView(
slivers: <Widget>[
SliverOverlapInjector(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(
context)),
SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(_, index) => Text('not working'),
childCount: 100),
itemExtent: 25)
],
),
),
),
Center(child: Text('working'))
])),
));
}
}flutter doctor -v[✓] Flutter (Channel stable, 1.22.6, on macOS 11.1 20C69 darwin-x64, locale en-GB)
• Flutter version 1.22.6 at /Users/tahatesser/Code/flutter_stable
• Framework revision 9b2d32b605 (12 days ago), 2021-01-22 14:36:39 -0800
• Engine revision 2f0af37152
• Dart version 2.10.5
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Volumes/Extreme/SDK
• Platform android-30, build-tools 30.0.3
• ANDROID_HOME = /Volumes/Extreme/SDK
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
• Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
• CocoaPods version 1.10.1
[!] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.19.0
[!] Connected device
! No devices available
! Doctor found issues in 2 categories.[✓] Flutter (Channel master, 1.26.0-18.0.pre.156, on macOS 11.1 20C69 darwin-x64, locale en-GB)
• Flutter version 1.26.0-18.0.pre.156 at /Users/tahatesser/Code/flutter_master
• Framework revision 45508985b1 (8 hours ago), 2021-02-02 22:46:04 -0500
• Engine revision 2c144c3eeb
• Dart version 2.12.0 (build 2.12.0-282.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Volumes/Extreme/SDK
• Platform android-30, build-tools 30.0.3
• ANDROID_HOME = /Volumes/Extreme/SDK
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
• CocoaPods version 1.10.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• 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_242-release-1644-b3-6915495)
[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.19.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 11.1 20C69 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.96
• No issues found! |
TahaTesser
added
found in release: 1.22
|
@TahaTesser When TabBarView children has child widget which is Started to SingleChildScrollView, zoombackground does not triggered. Why Scrollable widget in tab index, zoombackground is not triggered? |
This comment has been minimized.
This comment has been minimized.
I have tried it without success, did you succeed? |
|
Here is an issue I've opened today #82150 Please have a look at it. If only the |
|
UPDATED For anyone who needs a quick but imperfect hack badly, see this repo and apply the changes to your Have a play at this demo web app (resize to phone screen size for best result): https://himalaya-nuts.github.io/sliver_app_bar_stretch With the changes above, the SliverAppBar does stretch, and the effect is somewhat acceptable to me. But this is JUST a quick hack, optimal effect requires extensive refactoring. Some limitations apply:
|
|
Would you mind showing it with a video or GIF? Thanks for notifying! I will test it but I am not able to do that in a few days. So, it will be really good to see a video. (or even a live web demo) |
|
@yasinarik I spent some time to wrap it up and updated my comment above, you can check the demo web app there. Cheers. |
|
@himalaya-nuts Thanks a lot. I really appreciate it. You've spent quite a lot time. Currently, I am working another part of an app and can't wait to get back to this part to try it out. |
|
Any news about this issue? |
|
I tried a workaround and it works good. |
|
Update @Piinks I'm sure I have solved this problem perfectly. :) Fixed by:
Web demo 👉 Click Here For more information, see: nested_scroll_view_plus |
|
That's awesome @idootop! Would you be interested in submitting a PR? Or publishing it as a package? |
I've created a package for anyone who is in dire need of this new feature: https://pub.dev/packages/nested_scroll_view_plus 💡 Usageimport 'package:nested_scroll_view_plus/nested_scroll_view_plus.dart';
// Step 1: Replace `NestedScrollView` with `NestedScrollViewPlus`
NestedScrollViewPlus(
headerSliverBuilder: (context, innerScrolled) => <Widget>[
// ... insert your header sliver widgets here
],
body: CustomScrollView(
// Step 2: [🚨IMPORTANT] Set the physics of `CustomScrollView` to `AlwaysScrollableScrollPhysics`
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
slivers: <Widget>[
// ... insert your body sliver widgets here
],
),
);Example usage:
That's it! For additional examples, please visit the scroll_master repository. It includes features such as pull-to-refresh for ⭕️ For Older Flutter VersionsIf you are using an older version of Flutter, please follow these steps to install the appropriate branch from the old git repository. dependencies:
custom_nested_scroll_view:
git:
url: https://github.com/idootop/custom_nested_scroll_view.git
# Choose the branch based on your local Flutter version
ref: flutter-3.7The different branches support the following Flutter versions:
For more details, please visit the old documentation for |
Piinks
changed the title
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-design
|
@idootop fix sounds good. I'll try to manually create that fix to have control of code to be able to compare if flutter launches some official updates. |
|
Reproducible on the latest Code Sample
import 'package:flutter/material.dart';
void main() => runApp(const AppBarApp());
class AppBarApp extends StatelessWidget {
const AppBarApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
home: SafeArea(
child: DefaultTabController(
length: 2,
child: NestedScrollView(
physics: BouncingScrollPhysics(),
headerSliverBuilder: (context, innerScrolled) => <Widget>[
SliverOverlapAbsorber(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(
context),
sliver: SliverAppBar(
pinned: true,
stretch: true,
title: Text('username'),
expandedHeight: 325,
flexibleSpace: FlexibleSpaceBar(
stretchModes: <StretchMode>[
StretchMode.zoomBackground,
StretchMode.blurBackground,
],
background: Image.asset(
'assets/images/img.jpg',
fit: BoxFit.cover)),
bottom: TabBar(tabs: <Widget>[
Text('test1'),
Text('test2')
])),
)
],
body: Scaffold(
body: TabBarView(children: [
Builder(
builder: (context) => CustomScrollView(
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView
.sliverOverlapAbsorberHandleFor(context)),
SliverFixedExtentList(
delegate: SliverChildBuilderDelegate(
(_, index) => Text('not working'),
childCount: 100),
itemExtent: 25)
],
),
),
Text('working')
]),
)))),
);
}
}
Screen record
untitled.webmstable, master flutter doctor -v
|
dam-ease
added
workaround available
code sample
DefaultTabController( length: 2, child: NestedScrollView( physics: BouncingScrollPhysics(), headerSliverBuilder: (context, innerScrolled) => <Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), child: SliverAppBar( pinned: true, stretch: true, title: Text('username'), expandedHeight: 325, flexibleSpace: FlexibleSpaceBar( stretchModes: <StretchMode>[ StretchMode.zoomBackground, StretchMode.blurBackground, ], background: Image.asset('images/splash.png', fit: BoxFit.cover) ), bottom: TabBar( tabs: <Widget>[ Text('test1'), Text('test2') ] ) ), ) ], body: TabBarView( children: [ Builder( builder: (context) => CustomScrollView( slivers: <Widget>[ SliverOverlapInjector( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)), SliverFixedExtentList( delegate: SliverChildBuilderDelegate( (_, index) => Text('not working'), childCount: 100), itemExtent: 25 ) ], ), ), Text('working') ] )));flutter doctor -v
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.1 19B88, locale en-CN) • Flutter version 1.12.13+hotfix.9 at /Users/lalawila/flutter • Framework revision f139b11009 (6 days ago), 2020-03-30 13:57:30 -0700 • Engine revision af51afceb8 • Dart version 2.7.2 [!] Android toolchain - develop for Android devices (Android SDK version 29.0.2) • Android SDK at /Users/lalawila/Library/Android/sdk • Android NDK location not configured (optional; useful for native profiling support) • Platform android-29, build-tools 29.0.2 • Java binary at: /Library/Java/JavaVirtualMachines/jdk-10.0.2.jdk/Contents/Home/bin/java • Java version Java(TM) SE Runtime Environment 18.3 (build 10.0.2+13) ✗ Android license status unknown. Try re-installing or updating your Android SDK Manager. See https://developer.android.com/studio/#downloads or visit https://flutter.dev/setup/#android-setup for detailed instructions. [✓] Xcode - develop for iOS and macOS (Xcode 11.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.2.1, Build version 11B53 • CocoaPods version 1.8.0 [!] Android Studio (not installed) • Android Studio not found; download from https://developer.android.com/studio/index.html (or visit https://flutter.dev/setup/#android-setup for detailed instructions). [✓] VS Code (version 1.43.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.9.0 [✓] Connected device (1 available) • iPhone 11 • 0BFEAC24-164A-4F59-B67D-EBDBF1A499D1 • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-2 (simulator) ! Doctor found issues in 2 categories.The text was updated successfully, but these errors were encountered: