NestedScrollView scroll doesn't work as intended on iOS #129119
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
I have provided the minimal code sample. When scrolling up and down, the header sometimes snaps to max height and the body overscrolls
Issues persists both on flutter 3.7 and 3.10
Expected results
The header should smoothly decrease from max height to minimum height.
Actual results
The header snaps to max height and the body overscrolls.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: NestedScrollView(
body: Builder(builder: (context) {
return CustomScrollView(
slivers: [
SliverOverlapInjector(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
SliverToBoxAdapter(
child: Container(
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.black),
),
height: 50,
child: const Center(
child: Text('Body'),
),
),
),
],
);
}),
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverPersistentHeader(
pinned: true,
delegate: SliverPersistentHeaderBuilderDelegate(
maxExtentHeight: 300,
minExtentHeight: 100,
builder: (context, shrinkOffset, overlapsContent) {
return Container(
color: Colors.red,
child: const Center(child: Text('Header')),
);
},
),
),
),
];
},
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
class SliverPersistentHeaderBuilderDelegate
extends SliverPersistentHeaderDelegate {
final double maxExtentHeight;
final double minExtentHeight;
final Widget Function(
BuildContext context,
double shrinkOffset,
bool overlapsContent,
) builder;
SliverPersistentHeaderBuilderDelegate({
required this.maxExtentHeight,
required this.minExtentHeight,
required this.builder,
});
@override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent,
) {
return Align(child: builder(context, shrinkOffset, overlapsContent));
}
@override
double get maxExtent => maxExtentHeight;
@override
double get minExtent => minExtentHeight;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}Screenshots or Video
Screenshots / Video demonstration
https://github.com/flutter/flutter/assets/65122943/5f697081-b479-462e-9586-b6711f795805Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.10.5, on macOS 13.1 22C65 darwin-arm64, locale en-LT)
• Flutter version 3.10.5 on channel stable at /Users/rimantovas/Desktop/Flutter/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 796c8ef792 (6 days ago), 2023-06-13 15:51:02 -0700
• Engine revision 45f6e00911
• Dart version 3.0.5
• DevTools version 2.23.1
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/rimantovas/Library/Android/sdk
• Platform android-33, build-tools 31.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.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 11.0.11+0-b60-7590822)
[✓] VS Code (version 1.78.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.64.0
[✓] VS Code (version 1.79.0-insider)
• VS Code at /Applications/Visual Studio Code - Insiders.app/Contents
• Flutter extension version 3.66.0
[✓] Connected device (5 available)
• Rimo iPhone 13 (mobile) • 00008110-001E2D013E06801E • ios • iOS 16.1.1 20B101
• iPhone SE (3rd generation) (mobile) • 695321C2-B736-40DD-9EFA-1107D37DD3CE • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
• iPhone 14 Pro Max (mobile) • DC2272DF-D5C6-4F0F-A20C-9EAA261AA7DF • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-2 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.133
[✓] Network resources
• All expected network resources are available.
• No issues found!