Listview widget does not scroll smoothly(scroll with glitch)
Steps to Reproduce
- Run the attached sample on iPhone 14 simulator 16.2
- List view does not scroll smoothly
Expected results: ListView widget will scroll smoothly without a glitch
Actual results: ListView widget scroll with glitch
Code sample
ScrollController scrollController1 = ScrollController();
ScrollController scrollController2 = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text("Title"),
),
body: Container(
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: 0,
top: 0,
child: Scrollbar(
controller: scrollController1,
child: ListView(
scrollDirection: Axis.horizontal,
controller: scrollController1,
children: [
Container(
width: 1500,
child: Scrollbar(
controller: scrollController2,
child: ListView(
scrollDirection: Axis.vertical,
controller: scrollController2,
children: [
Container(
width: 1500,
height: 1500,
child: Row(
children: getChildren(),
),
)
],
),
),
)
],
),
))
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
));
}
List<Widget> getChildren()
{
List<Widget> children = <Widget>[];
for(int i=0; i<10; i++)
{
children.add(Container(
width: 150,height: 1500,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Container(color: Colors.red.withOpacity(0.1 * i),),
),
));
}
return children;
}
Issue replication video
Running this example on https://dartpad.dev errors in the console:
Error: Assertion failed: file:///Users/brettmorgan/Documents/GitHub/dart-services/flutter-sdks/stable/packages/flutter/lib/src/widgets/framework.dart:2685:20
_debugCurrentBuildTarget == context
is not trueError: Error: Assertion failed: file:///Users/brettmorgan/Documents/GitHub/dart-services/flutter-sdks/stable/packages/flutter/lib/src/widgets/framework.dart:2685:20
_debugCurrentBuildTarget == context
is not true
The above code was working fine as expected, please find the dartpad image as below
The specified issue only raised on iPhone devices and simulators. It was not replicated on Android, Web, Windows, and Mac OS platforms.
Note: It shows like a performance glitch.
@Sasikumar3595
I looked at the code implementation you shared and noted below as the hierarchy of widgets:
Container -> Stack -> children [Positioned] -> Scrollbar -> ListView -> [children] -> Container -> Scrollbar -> ListView -> [children] -> Container -> Row -> Container.
Which shows nested Scrollbar and ListView respectively. Would like to know the use case you are trying to achieve by having above widgets hierarchy. Are you looking to implement 2D scrolling ?
Can you also try by using SingleChildScrollView or something like ListView.builder and pass horizontal and vertical scroll directions and see if it helps or not ?
We have tried with the SingleChildScrollView and ListView widgets and the reported issue was replicated.
Our requirement is to scroll the children in a vertical and horizontal manner
@Sasikumar3595
I tried your code sample and I have 2 observations and a question
observations
- I don't experience any glitch or stutter
screen recording
- partially related to the alleged issue, your code need optimization
- flutter_lints is yelling about unnecessary containers and such (even in your post)
List<Widget> getChildren() ...is bad for performances (see this issue and this SO question)
question
are you experiencing the issue scrolling with a mouse?
(if so the issue is very much related to this)
We created this sample to replicate the issue and we still facing issues on scrolling for iPhone simulator and iPhone devices. It looks like a glitch(video added on description #122886 (comment))
We created this sample to replicate the issue and we still facing issues on scrolling for iPhone simulator and iPhone devices. It looks like a glitch(video added on description #122886 (comment))
I'm not sure "'reproduces' on my machine" is a useful input for a bug report,
running your code sample the issue doesn't seem to occur (and I'm running a air m1, nothing fancy)
question
are you experiencing the issue scrolling with a mouse?
We prepared the above-attached sample for reproducing the issue and we checked with the stateless widget to resolve the issue but still, the glitch showed to us.
We suspect the issue is related to performance.
We have tested the issue on the below devices and the issue was reproduced - iPhone 14 simulator and iPhone SE real device.
We have tested this with the iPad simulator and it is working fine.
Note: We have tested the issue on iOS's latest version with flutter's latest version and the issue was only replicated on the iOS platform only, other platforms(Windows, MacOS, Android, Web) are working fine.
We have tested the issue on the below devices and the issue was reproduced - iPhone 14 simulator
[...]
Note: We have tested the issue on iOS's latest version with flutter's latest version and the issue was only replicated on the iOS platform only, other platforms(Windows, MacOS, Android, Web) are working fine.
I tested your code with with iPhone 14 sim as well and all the above,
the issue does not reproduce, see video recording
flutter doctor
[!] Flutter (Channel stable, 3.7.7, on macOS 13.2.1 22D68 darwin-arm64, locale en-EE)
• Flutter version 3.7.7 on channel stable at /Users/yakforward/fvm/versions/stable
! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.19.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/yakforward/fvm/versions/stable. Consider adding
/Users/yakforward/fvm/versions/stable/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2ad6cd72c0 (2 weeks ago), 2023-03-08 09:41:59 -0800
• Engine revision 1837b5be5f
• Dart version 2.19.4
• DevTools version 2.20.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[✓] 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 (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
[✓] VS Code (version 1.76.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.60.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.64
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 3 categories.(who's "we"?)
| Owner Name | flutter |
| Repo Name | flutter |
| Full Name | flutter/flutter |
| Language | Dart |
| Created Date | 2015-03-06 |
| Updated Date | 2023-03-30 |
| Star Count | 151602 |
| Watcher Count | 3555 |
| Fork Count | 25000 |
| Issue Count | 11498 |
YOU MAY BE INTERESTED
| Issue Title | Created Date | Updated Date |
|---|