Skip to content

SelectionArea intermittently interferes with listview scrolling (and possibly other scrolls) #150897

@mark8044

Description

@mark8044

Steps to reproduce

SelectionArea wrapped around text within a listview is causing some of the scroll gestures to not get picked up (no response to swiping finger on the screen).

This behavior is intermittent. But I'm best able to reproduce it when I scroll down (swipe up) fairly quickly and then 'catch' or stop the scroll by single tapping on the screen, then immediately after it stops then try to scroll up (swipe down) and nothing will happen. You will have to try swiping down a second or even third/fourth time for it to finally move the list.

I just noticed the behavior ~one week ago and took me some time to track down the cause of the issue. Because it took time to find, Im not sure what change made it happen, but I can guess that it appears to affect master 3.23.0-13.0.pre.x. This behavior is not seen on the current stable channel of 3.22.2 or earlier versions of 3.23 from my recollection

UPDATE, trying to find the actual bad commit by randomly installing commits:
Commit 84fe3b6e537220caf03784a2f574cd009038b0d8 is OK (5/23/24)
Commit d89ae485208c5c6a9e20fe1de994a7d22c9b4a00 is OK (5/30/24)
Commit c63339866d4f7477777e7377bf044f14b743f71c is OK (6/20/24)
Commit 9056c0b192bda5ff055a80d2caaa8c0d6d10dbac is OK (6/20/24)
Commit 20459dda0d6d22d0502b9e04347401027016e573 is BAD (6/20/24)
Commit 4a84fb0fea9dedbedf47f225d1a5581f5e2a8ea2 is BAD (6/20/24)
Commit d2b42d8c13f2dba6ba12c84a0e66fadf7eb94c16 is BAD (6/24/24)

UPDATE: Therefor I believe #149295 has caused this problem

Ive attached a simple widget to demonstrate the behavior. I have alot of text and some images in there so that its a longer widget so you can play around and bring the effect out. For comparison purposes, simply remove all the SelectionArea wrappers and you will see it is quite smooth and professional.

This equally affects Android and iOS

I find this change to be fairly nasty as it makes otherwise bug-free apps feel sluggish and buggy.

Expected results

Smooth scrolling fully responsive to user swipes

Actual results

Many swipes up and down in a listviw are not registered and no movement occurs with swipes

Code sample

Code sample

Code in which the error can be seen

class TestView extends StatefulWidget {
  const TestView({super.key});

  @override
  State<TestView> createState() => _TestViewState();
}

class _TestViewState extends State<TestView> {
  @override
  Widget build(BuildContext context) {
    return
      Material(
        child: ListView(
            children: [
              Text('List item 1'),
              SizedBox(height: 30,),
              SelectionArea(child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet eget sit amet tellus cras adipiscing enim eu. In iaculis nunc sed augue lacus. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Fringilla urna porttitor rhoncus dolor purus non. Nulla facilisi cras fermentum odio. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Amet dictum sit amet justo donec enim diam vulputate ut. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.\n\nMagna eget est lorem ipsum dolor. A diam maecenas sed enim. Vehicula ipsum a arcu cursus. Nisi quis eleifend quam adipiscing vitae proin sagittis. Ullamcorper velit sed ullamcorper morbi. Viverra suspendisse potenti nullam ac tortor. Augue lacus viverra vitae congue eu consequat. Et odio pellentesque diam volutpat commodo sed egestas. Viverra justo nec ultrices dui sapien. Ac placerat vestibulum lectus mauris ultrices eros in. At in tellus integer feugiat scelerisque. Neque gravida in fermentum et sollicitudin ac orci. Lectus mauris ultrices eros in. Turpis egestas maecenas pharetra convallis posuere morbi. Facilisis magna etiam tempor orci eu.')),
              SizedBox(height: 10,),
              Image.network('https://picsum.photos/1400/800'),
              Text('List item 10'),
              SizedBox(height: 30,),
              SelectionArea(child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet eget sit amet tellus cras adipiscing enim eu. In iaculis nunc sed augue lacus. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Fringilla urna porttitor rhoncus dolor purus non. Nulla facilisi cras fermentum odio. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Amet dictum sit amet justo donec enim diam vulputate ut. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.\n\nMagna eget est lorem ipsum dolor. A diam maecenas sed enim. Vehicula ipsum a arcu cursus. Nisi quis eleifend quam adipiscing vitae proin sagittis. Ullamcorper velit sed ullamcorper morbi. Viverra suspendisse potenti nullam ac tortor. Augue lacus viverra vitae congue eu consequat. Et odio pellentesque diam volutpat commodo sed egestas. Viverra justo nec ultrices dui sapien. Ac placerat vestibulum lectus mauris ultrices eros in. At in tellus integer feugiat scelerisque. Neque gravida in fermentum et sollicitudin ac orci. Lectus mauris ultrices eros in. Turpis egestas maecenas pharetra convallis posuere morbi. Facilisis magna etiam tempor orci eu.')),
              SizedBox(height: 10,),

              Text('List item 20'),
              SizedBox(height: 30,),
              SelectionArea(child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet eget sit amet tellus cras adipiscing enim eu. In iaculis nunc sed augue lacus. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Fringilla urna porttitor rhoncus dolor purus non. Nulla facilisi cras fermentum odio. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Amet dictum sit amet justo donec enim diam vulputate ut. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.\n\nMagna eget est lorem ipsum dolor. A diam maecenas sed enim. Vehicula ipsum a arcu cursus. Nisi quis eleifend quam adipiscing vitae proin sagittis. Ullamcorper velit sed ullamcorper morbi. Viverra suspendisse potenti nullam ac tortor. Augue lacus viverra vitae congue eu consequat. Et odio pellentesque diam volutpat commodo sed egestas. Viverra justo nec ultrices dui sapien. Ac placerat vestibulum lectus mauris ultrices eros in. At in tellus integer feugiat scelerisque. Neque gravida in fermentum et sollicitudin ac orci. Lectus mauris ultrices eros in. Turpis egestas maecenas pharetra convallis posuere morbi. Facilisis magna etiam tempor orci eu.')),
              SizedBox(height: 10,),
              Image.network('https://picsum.photos/1400/800'),
              Text('List item 40'),
              SizedBox(height: 30,),
              SelectionArea(child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet eget sit amet tellus cras adipiscing enim eu. In iaculis nunc sed augue lacus. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Fringilla urna porttitor rhoncus dolor purus non. Nulla facilisi cras fermentum odio. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Amet dictum sit amet justo donec enim diam vulputate ut. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.\n\nMagna eget est lorem ipsum dolor. A diam maecenas sed enim. Vehicula ipsum a arcu cursus. Nisi quis eleifend quam adipiscing vitae proin sagittis. Ullamcorper velit sed ullamcorper morbi. Viverra suspendisse potenti nullam ac tortor. Augue lacus viverra vitae congue eu consequat. Et odio pellentesque diam volutpat commodo sed egestas. Viverra justo nec ultrices dui sapien. Ac placerat vestibulum lectus mauris ultrices eros in. At in tellus integer feugiat scelerisque. Neque gravida in fermentum et sollicitudin ac orci. Lectus mauris ultrices eros in. Turpis egestas maecenas pharetra convallis posuere morbi. Facilisis magna etiam tempor orci eu.')),
              SizedBox(height: 10,),
            ],
            ),
      );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Broken on version 3.23.

Problem can be seen at :02, :05, :10, :13

Broken.3.23.mov

Working smoothly on version 3.22.

Working.3.22.mov

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
Flutter 3.23.0-13.0.pre.357 • channel master • https://github.com/flutter/flutter.git
Framework • revision 805d79607e (24 minutes ago) • 2024-06-27 05:53:58 +0200
Engine • revision a9194f0f01
Tools • Dart 3.5.0 (build 3.5.0-304.0.dev) • DevTools 2.36.0

Metadata

Metadata

Labels

P2Important issues not at the top of the work listc: regressionIt was better in the past than it is nowf: scrollingViewports, list views, slivers, etc.f: selectionSelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIsfound in release: 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions