Skip to content

Scrolling is janky with simple listview with long list of strings #59404

@shadowdogg

Description

@shadowdogg
  1. Please tell us exactly how to reproduce the problem you are running into.

I've been having issues with janking for a while, when you get more complicated widgets, this hanking effect gets expectedly worse. Took a video to show how even a simple scroll bar which was took from flutter's own cookbook becomes janky. Paying attention to the right where the scrollbar indicates the scroll. I attempted to scroll quickly in one movement. One is when the code is ran as a native android app and the other as a web app running in android chrome.

  1. Please attach a small application (ideally just one main.dart file) that
    reproduces the problem. You could use https://gist.github.com/ for this.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<String>.generate(100, (i) => "Item $i"),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Scrollbar(
          child: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('${items[index]}'),
              );
            },
          ),
        ),
      ),
    );
  }
}
  1. Switch flutter to master channel and run this app on a physical device
    using profile mode with Skia tracing enabled, as follows:
    flutter channel master
    flutter run --profile --trace-skia
    Then press ‘P’ to enable the performance overlay.

I am on master channel

  1. Record a video of the performance issue using another phone so we
    can have an intuitive understanding of what happened. Don’t use
    "adb screenrecord", as that affects the performance of the profile run.

Both running on a Pixel 3a running Android 10 (5th June 2020 security update)
Scroll test on native android app: https://youtu.be/A0KxjSvy9wU
Scroll test on chrome browser (android): https://youtu.be/OCWMrBHqNV0

  1. Open Observatory and save a timeline trace of the performance issue
    so we know which functions might be causing it. See "How to Collect
    and Read Timeline Traces" on this blog post:
    https://medium.com/flutter/profiling-flutter-applications-using-the-timeline-a1a434964af3#a499

Don't think I can with Android chrome?

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work listc: performanceRelates to speed or footprint issues (see "perf:" labels)f: scrollingViewports, list views, slivers, etc.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: duplicateIssue is closed as a duplicate of an existing issue

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions