When using scrollable_positioned_list with random height items the scrollTo(index....) does not work correctly

[mwolffalonso]

Package

https://pub.dev/packages/scrollable_positioned_list

scrollable_positioned_list 0.1.9 & others

The scrollTo a particular index fails to go to the correct position when the List Items are of different heights (random). This does not happen when the items have the same height.

Please check the attached code to reproduce.

scrollable_list_audioservice.zip

Expected behavior

ScrollTo should position the ListView with the selected Item "top" edge visible.

Actual behavior

The stated before does not happens most of the times Scrollto is called. And sometimes even nothing from the selected item is showed on the screen

Environment

Flutter Latest 1.22.5, both Android and iOS

C:\Users\martinwo\Documents\GIT\scrollable_list_audioservice>flutter doctor -v
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.17763.1637], locale es-UY)
• Flutter version 1.22.5 at C:\Users\martinwo\flutter
• Framework revision 7891006299 (6 weeks ago), 2020-12-10 11:54:40 -0800
• Engine revision ae90085a84
• Dart version 2.10.4

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at C:\Users\martinwo\AppData\Local\Android\sdk
• Platform android-30, build-tools 29.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.

[√] Android Studio (version 4.0)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 50.0.1
• Dart plugin version 193.7547
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (1 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)

• No issues found!

Additional details

This same code works as expected in Flutter 1.20.0

No errors are shown at the logs

[jamesderlin]

The example that's included with ScrollablePositionedList actually does use items with random heights.

Skimming over your code, you assign a random height to each item, but there's no guarantee that a given item will have the same random height across widget tree rebuilds. I therefore think that the issue is not about random heights (especially since they seem to mostly work in the example app) but that the heights are not persistent across rebuilds.

Thank you for providing reproduction code. However, it's rather unclear from the code what I'm observing, what I'm supposed to observe, and how to trigger the problem with an Android emulator.

That said, I presume that you did encounter a real issue with non-random heights. If so, could you provide minimal reproduction code that clearly demonstrates the issue? The example app could be used as a starting point.

[mwolffalonso]

Hello @jamesderlin

You are right, i changed that and the example i shared before started behaving fine.
I am now thinking that this problem is associated to the ussage of this plugin with this other:
https://pub.dev/packages/tweet_ui

I dont know how are the heights of the rows affected exactly by that plugin. But it´s weird that is working with scrollable_positioned list at flutter 1.20.4 and after going to flutter 1.22.x is broken.

I will open an issue within that plugin too just in case.

Please check out this code where i added that plugin to the minimal test.

scrollable_list_audioservice_v2.zip

Thanks!

[mwolffalonso]

Hello @jamesderlin have you seen my last comment and code? Thanks

[jamesderlin]

Thanks for the updated reproduction code. I haven't had time to try it yet.

[mt633]

Not sure if this exactly the same issue but I'm also struggling with the scrollTo method when the item heights aren't set. I'm using a FutureBuilder to load images but then scrollTo won't work until I manually scroll the view. Here's an example of what I'm trying to do:

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

class TestApp extends StatefulWidget {
  const TestApp({Key key}) : super(key: key);

  @override
  _TestAppState createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {
  ItemPositionsListener positionsListener = ItemPositionsListener.create();
  ItemScrollController scrollController = ItemScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ScrollablePositionedList.builder(
        itemScrollController: scrollController,
        itemPositionsListener: positionsListener,
        itemCount: 100,
        itemBuilder: (context, index) {
          return FutureBuilder(
              future: readBytes(Uri.https(
                'flutter.dev',
                "/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png",
              )),
              builder: (context, snapshot) {
                if (snapshot.hasData &&
                    snapshot.connectionState == ConnectionState.done) {
                  return Stack(
                    children: [
                      Image.memory(
                        snapshot.data,
                        fit: BoxFit.contain,
                      ),
                      Text("Index $index"),
                    ],
                  );
                } else {
                  return Container();
                }
              });
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Center(child: Text("5")),
        onPressed: () {
          scrollController.scrollTo(
              index: 5, duration: Duration(milliseconds: 1000));
        },
      ),
    );
  }
}

The results is that the button doesn't respond until I scroll the list manually:

If I wrap the FutureBuilder in a Container and set its size, everything works as expected:

// This fixes the code above
 return Container(
            height: 100,
            child: FutureBuilder(

I've been trying to think of a workaround when I don't know the size of the image in advance but at the moment I'm stuck.