flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.42k stars 27.3k forks source link

Odd scroll behavior on iOS for list views #11116

Closed KevinTheGray closed 7 years ago

KevinTheGray commented 7 years ago

Steps to Reproduce

build with this code

return new Scaffold(
      body: new ListView(
        children: <Widget>[
          new Text("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed "
              "do eiusmodtempor incididunt ut labore et dolore magna aliqua. "
              "Ut enim ad minim veniam,quis nostrud exercitation ullamco "
              "laboris nisi ut aliquip ex ea commodoconsequat. Duis aute "
              "irure dolor in reprehenderit in voluptate velit essecillum dolore "
              "eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, "
              "sunt in culpa qui officia deserunt mollit anim id est laborum."),
        ],
      ),
    );

try to scroll, and you will notice it is very rigid and odd.

If you add a TON of text so it fills the screen and you actually need to scroll, it will behave a little better

Flutter Doctor

[✓] Flutter (on Mac OS X 10.12.4 16E195, locale en-US, channel master)
    • Flutter at /Users/KG/Developer/Flutter/flutter
    • Framework revision 47c4d64f01 (2 days ago), 2017-07-05 18:39:22 -0700
    • Engine revision 8ad1576f27
    • Tools Dart version 1.25.0-dev.4.0

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/KG/Library/Android/sdk
    • Platform android-26, build-tools 26.0.0
    • ANDROID_HOME = /Users/KG/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 8.3.3, Build version 8E3004b, 
    • ios-deploy 1.9.1
    • CocoaPods version 1.2.1

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Community Edition (version 2017.1.5)
    • Flutter plugin version 15.0
    • Dart plugin version 171.4694.29

[✓] Connected devices
    • Kevin's iPhone • c95c86bdc3aac565adb373de3dc2dbedcdecc900 • ios • iOS 10.3.1
collinjackson commented 7 years ago

I tried running this on an iPhone 7 Plus, and when I scroll the text, sometimes it feels "sticky"

If I put my finger down and wait, then start a scroll, it's fine. But if I put my finger down and then immediately start a scroll, it takes awhile to recognize the gesture. My guess is that probably it isn't sure yet whether I'm trying to start a tap or a scroll, and it needs the extra time to disambiguate the gestures.

Is that what you're seeing? Or is it something else?

KevinTheGray commented 7 years ago

this video helps demonstrate https://www.youtube.com/watch?v=VY9uc9t1-Jw

collinjackson commented 7 years ago

Can you post the code you used for the video? It looks different than the code snippet above.

KevinTheGray commented 7 years ago
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
//      showPerformanceOverlay: true,
//      checkerboardRasterCacheImages: true,
      title: 'Click Test',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new MyHomePage(title: 'Scroll Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new ListView(
        children: <Widget>[
          new Text("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed "
              "do eiusmodtempor incididunt ut labore et dolore magna aliqua. "
              "Ut enim ad minim veniam,quis nostrud exercitation ullamco "
              "laboris nisi ut aliquip ex ea commodoconsequat. Duis aute "
              "irure dolor in reprehenderit in voluptate velit essecillum dolore "
              "eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, "
              "sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed "
              "do eiusmodtempor incididunt ut labore et dolore magna aliqua. "
              "Ut enim ad minim veniam,quis nostrud exercitation ullamco "
              "laboris nisi ut aliquip ex ea commodoconsequat. Duis aute "
              "irure dolor in reprehenderit in voluptate velit essecillum dolore "
              "eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, "
              "sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed "
              "do eiusmodtempor incididunt ut labore et dolore magna aliqua. "
              "Ut enim ad minim veniam,quis nostrud exercitation ullamco "
              "laboris nisi ut aliquip ex ea commodoconsequat. Duis aute "
              "irure dolor in reprehenderit in voluptate velit essecillum dolore "
              "eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, "
              "sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed "
              "do eiusmodtempor incididunt ut labore et dolore magna aliqua. "
              "Ut enim ad minim veniam,quis nostrud exercitation ullamco "
              "laboris nisi ut aliquip ex ea commodoconsequat. Duis aute "
              "irure dolor in reprehenderit in voluptate velit essecillum dolore "
              "eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, "
              "sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed "
              "do eiusmodtempor incididunt ut labore et dolore magna aliqua. "
              "Ut enim ad minim veniam,quis nostrud exercitation ullamco "
              "laboris nisi ut aliquip ex ea commodoconsequat. Duis aute "
              "irure dolor in reprehenderit in voluptate velit essecillum dolore "
              "eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, "
              "sunt in culpa qui officia deserunt mollit anim id est laborum."),

        ],
      ),
    );
  }
}
collinjackson commented 7 years ago

I was not able to reproduce the behavior you're seeing with the same code sample on an iPhone 7 Plus. What type of iPhone is that? I can try to get one.

Here are my flutter doctor results.

[✓] Flutter (on Mac OS X 10.12.5 16F73, locale en-US, channel unknown) • Flutter at /Users/jackson/git/flutter • Framework revision 7a866a83a1 (2 days ago), 2017-07-06 04:39:27 -0700 • Engine revision 8ad1576f27 • Tools Dart version 1.24.2

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0) • Android SDK at /Users/jackson/Library/Android/sdk/ • Platform android-26, build-tools 26.0.0 • ANDROID_HOME = /Users/jackson/Library/Android/sdk/ • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] iOS toolchain - develop for iOS devices (Xcode 8.3.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 8.3.3, Build version 8E3004b, • ios-deploy 1.9.1 • CocoaPods version 1.2.1

[✓] Android Studio (version 2.3) • Android Studio at /Applications/Android Studio.app/Contents • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Community Edition (version 2017.1.4) • Flutter plugin version 15.0 • Dart plugin version 171.4694.29

[✓] Connected devices • Jacksonphone • 9030c4fbeb16a1981b3e685fbf21521d79ed6ac1 • ios • iOS 10.3.2 • iPhone 7 Plus • F8A917C4-9848-49C2-8F0D-664B49E0B635 • ios • iOS 10.3 (simulator)

KevinTheGray commented 7 years ago

it is an iPhone 7 on 10.3.1. That's really odd you don't see it on the 7 plus

eseidelGoogle commented 7 years ago

FYI @xster who was just working on iOS scroll behavior.

collinjackson commented 7 years ago

Assigned @xster to investigate... it sounds like the hard part here is just reproducing the bug.

xster commented 7 years ago

Ya I can repro on iPhone 6s and 7 in release mode. There's definitely something wrong with it. I'll dive into it tomorrow.

xster commented 7 years ago

Some issues with ScrollView. Reproducible with just

import 'package:flutter/material.dart';

void main() => runApp(new ListView(children: <Widget>[new FlutterLogo()]));
xster commented 7 years ago

Doh, I made the bo bo in #11065. It's wrong when lists are smaller than the viewport. Fix in #11243

github-actions[bot] commented 3 years ago

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.