[framework] [scrolling] [performance] ScrollController abnormal behavior with long lists #153085

Activity

1. darshankawar

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Aug 9, 2024
2. darshankawar commented on Aug 9, 2024

   

   darshankawar

   on Aug 9, 2024

   Member

   More actions

   Thanks for the detailed report @iapicca
   I was able to replicate and see the same behavior upon running on device as well as emulator with latest versions.

   Stable: 3.24.0
   Master: 3.24.0-1.0.pre.525
   

   ❤️React with ❤️1Reacted by Francesco Iapicca
3. darshankawar

   added

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   c: performanceRelates to speed or footprint issues (see "perf:" labels)Relates to speed or footprint issues (see "perf:" labels)

   f: scrollingViewports, list views, slivers, etc.Viewports, list views, slivers, etc.

   perf: memoryPerformance issues related to memoryPerformance issues related to memory

   has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work on

   found in release: 3.24Found to occur in 3.24Found to occur in 3.24

   team-frameworkOwned by Framework teamOwned by Framework team

   and removed

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Aug 9, 2024
4. Piinks commented on Aug 20, 2024

   

   Piinks

   on Aug 20, 2024

   Contributor

   More actions

   This seems like a duplicate of #52207

   • ScrollViewController handles "fast animations" and "jumps" poorly
   • the time set in animateTo in some cases is disregarded
   • occasionally animateTo returns long after the scrolling is over
   • jumpTo occasionally freeze the app

   This is because the list is trying to lay out all of the items that are flying by (or at least trying to) so quickly. Everything from the start to the destination must be built so we know what to show at the given location, and it is causing these performance issues. I think we can close this to refer to the #52207 ?
5. Piinks

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Aug 20, 2024
6. iapicca commented on Aug 21, 2024

   

   iapicca

   on Aug 21, 2024

   Last edited by iapicca

   Author

   More actions

   This is because the list is trying to lay out all of the items that are flying by (or at least trying to) so quickly. Everything from the start to the destination must be built so we know what to show at the given location, and it is causing these performance issues. I think we can close this to refer to the #52207 ?

   Hi @Piinks
   I updated the initial post delegating the performance issue to the issue you mentioned above
   and added a comment regarding the "freezing"

   Actual results

   • ScrollViewController handles "fast animations" and "jumps" poorly
     (see ListView: Poor performance with many variable-extent items + jumpTo (scroll bar, trackpad, mouse wheels) #52207)
   • the time set in animateTo in some cases is disregarded
   • occasionally animateTo returns long after the scrolling is over
   • jumpTo occasionally freeze the app
     (see comment)

   I feel that the other 2 aspects are worth investigating and,
   as pointed out in the title, somehow related to ScrollController

   1. the time set in animateTo in some cases is disregarded

   this is self explanatory

   2. [...] animateTo returns long after the scrolling is over

   this is very strange in my opinion, as ScaffoldMessenger's showSnackBar
   is called much later than the time collected by actualDuration
   this "feels" unrelated to scrolling and more relevant to rendering (imho)
   this behavior is easily reproducible in the step 4.b (or 4.c if doesn't explode)
7. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Aug 21, 2024
8. Piinks commented on Aug 21, 2024

   

   Piinks

   on Aug 21, 2024

   Last edited by Piinks

   Contributor

   More actions

   IMO it is not actually the scroll controller causing this. It is the demand to lay out so many widgets all at once that causes all of these issues, which is being tracked in that other issue I linked. We can leave this open though. Thanks for providing more details.

   👍React with 👍1Reacted by Francesco Iapicca
9. Piinks

   added

   P2Important issues not at the top of the work listImportant issues not at the top of the work list

   triaged-frameworkTriaged by Framework teamTriaged by Framework team

   on Aug 21, 2024
10. iapicca commented on Sep 19, 2024

    

    iapicca

    on Sep 19, 2024

    Author

    More actions

    @Piinks the issue does not occur adding prototypeItem
    I'm closing in favor of

    • ListView: Poor performance with many variable-extent items + jumpTo (scroll bar, trackpad, mouse wheels) #52207

    Code sample

    import 'package:flutter/material.dart';
    
    /// roughly a frame at 60 fps
    const _microsecondsPerFrameAt60fps = 16333;
    const _arbitraryScrollDuration = Duration(seconds: 5);
    const _itemCount = 10000;
    const _sixtyFPSDuration = Duration(
      microseconds: _microsecondsPerFrameAt60fps * _itemCount,
    );
    
    void main() => runApp(
          const MaterialApp(
            showPerformanceOverlay: true,
            home: MyHomePage(),
          ),
        );
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({super.key});
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      var _hasIcon = false;
      late final ScrollController _controller;
    
      @override
      void initState() {
        super.initState();
        _controller = ScrollController();
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    
      void _toggleIcon() => setState(() => _hasIcon = !_hasIcon);
    
      @override
      Widget build(context) => Scaffold(
            body: ListView.builder(
              controller: _controller,
              itemCount: _itemCount,
              prototypeItem: MyPrototypeWidget(
                hasIcon: _hasIcon,
                text: '0',
              ),
              itemBuilder: (context, index) => MyPrototypeWidget(
                hasIcon: _hasIcon,
                text: '$index',
              ),
            ),
            floatingActionButton: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                FloatingActionButton(
                  onPressed: () => _controller.jumpTo(0),
                  child: const Text('reset'),
                ),
                TimerButton(
                  controller: _controller,
                  duration: _arbitraryScrollDuration,
                ),
                TimerButton(
                  controller: _controller,
                  duration: _sixtyFPSDuration,
                ),
                FloatingActionButton(
                  onPressed: _toggleIcon,
                  child: _hasIcon
                      ? const Icon(Icons.text_increase_outlined)
                      : const FlutterLogo(),
                ),
              ],
            ),
          );
    }
    
    class TimerButton extends StatelessWidget {
      final ScrollController controller;
      final Duration duration;
      const TimerButton({
        super.key,
        required this.controller,
        required this.duration,
      });
    
      @override
      Widget build(context) => FloatingActionButton(
            onPressed: () async {
              final start = DateTime.now();
    
              await controller.animateTo(
                controller.position.maxScrollExtent,
                duration: duration,
                curve: Curves.linear,
              );
    
              if (!context.mounted) {
                return;
              }
    
              final actualDuration = DateTime.now().difference(start);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('expected duration: ${duration.inMilliseconds} ms\n'
                      'actual duration: ${actualDuration.inMilliseconds}'),
                ),
              );
            },
            child: Text('~${duration.inSeconds} s'),
          );
    }
    
    class MyPrototypeWidget extends StatelessWidget {
      final String text;
      final bool hasIcon;
      const MyPrototypeWidget({
        super.key,
        required this.text,
        required this.hasIcon,
      });
    
      @override
      Widget build(context) {
        final textWidget = Text(text, textAlign: TextAlign.center);
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            textWidget,
            for (var i = 0; i < 5; i++) hasIcon ? const FlutterLogo() : textWidget,
          ],
        );
      }
    }
    
11. iapicca

    closed this as completedon Sep 19, 2024
12. darshankawar

    added

    r: duplicateIssue is closed as a duplicate of an existing issueIssue is closed as a duplicate of an existing issue

    on Sep 20, 2024
13. github-actions commented on Oct 4, 2024

    

    github-actionsbot

    on Oct 4, 2024 – with GitHub Actions

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
14. github-actions

    locked as resolved and limited conversation to collaborators on Oct 4, 2024