scrollToIndex not working when defining AppBar

[jcblancomartinez]

Describe the bug

scrollToIndex is not working when defining AppBar.
scrollToIndex is working as expected when no defining AppBar.

Reproduction code

Code working as expected when no AppBar is defined:

import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll To Index working as expected',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  AutoScrollController _scrollController = AutoScrollController();

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((_) => _scrollController
        .scrollToIndex(0, preferPosition: AutoScrollPosition.begin));
    return Scaffold(
        body: ListView(
          controller: _scrollController,
          children: [
            Container(
              height: 550,
              color: Colors.red,
            ),
            Container(
              height: 100,
              color: Colors.black26,
            ),
            AutoScrollTag(
                key: ValueKey(0),
                controller: _scrollController,
                index: 0,
                child: Container(
                  height: 320.0,
                  color: Colors.yellow,
                )),
            Container(
              height: 700,
              color: Colors.blue,
            ),
          ],
        ));
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

Code not working as expected when AppBar is defined:

import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll To Index not working as expected',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  AutoScrollController _scrollController = AutoScrollController();

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((_) => _scrollController
        .scrollToIndex(0, preferPosition: AutoScrollPosition.begin));
    return Scaffold(
        appBar: AppBar(
          title: const Text('Text'),
        ),
        body: ListView(
          controller: _scrollController,
          children: [
            Container(
              height: 550,
              color: Colors.red,
            ),
            Container(
              height: 100,
              color: Colors.black26,
            ),
            AutoScrollTag(
                key: ValueKey(0),
                controller: _scrollController,
                index: 0,
                child: Container(
                  height: 320.0,
                  color: Colors.yellow,
                )),
            Container(
              height: 700,
              color: Colors.blue,
            ),
          ],
        ));
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

To Reproduce
Steps to reproduce the behavior:

1. Load the page

Expected behavior

scrollToIndex should take us to the third container.

Flutter Version:

juancarlos@juancarlos-XPS-15-7590:~/AndroidStudioProjects/solon_flutter_app$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.0, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (2 available)
! Device emulator-5554 is offline.

• No issues found!

Dependencies:

scroll_to_index: ^2.0.0

Describe on which device you found the bug:
Android 11 emulator

[jcblancomartinez]

Hi @jerrywell ,

Could you please help me debug this issue?

Thanks.

[jcblancomartinez]

Hi @jerrywell ,

I'm afraid that if this bug doesn't get solved soon, I will replace scroll_to_index with scrollable_positioned_list plugin.

Thanks.

[jerrywell]

can you try to wrap all children of list view with AutoScrollTag() having index 0, 1, 2, 4.

[jcblancomartinez]

@jerrywell

Code not working as expected when AppBar is defined and all containers have been wrapped with AutoScrollTag:

import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll To Index not working as expected',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  AutoScrollController _scrollController = AutoScrollController();

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((_) => _scrollController
        .scrollToIndex(2, preferPosition: AutoScrollPosition.begin));
    return Scaffold(
        appBar: AppBar(
          title: const Text('Text'),
        ),
        body: ListView(
          controller: _scrollController,
          children: [
            AutoScrollTag(
                key: ValueKey(0),
                controller: _scrollController,
                index: 0,
                child: Container(
                  height: 550,
                  color: Colors.red,
                )),
            AutoScrollTag(
                key: ValueKey(1),
                controller: _scrollController,
                index: 1,
                child: Container(
                  height: 100,
                  color: Colors.black26,
                )),
            AutoScrollTag(
                key: ValueKey(2),
                controller: _scrollController,
                index: 2,
                child: Container(
                  height: 320.0,
                  color: Colors.yellow,
                )),
            AutoScrollTag(
                key: ValueKey(4),
                controller: _scrollController,
                index: 4,
                child: Container(
                  height: 700,
                  color: Colors.blue,
                )),
          ],
        ));
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

[jerrywell]

this comment shows it's working with AppBar, may you try it out?

[jcblancomartinez]

@jerrywell

The reason why the code mentioned here works is because they have a fixed height for all containers. However, the issue with variable heights still exist.

I suggest you debug the code I pasted above to figure out the root cause.

Code working as expected when AppBar is defined and all containers have been wrapped with AutoScrollTag and have a fixed height of 400:

import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scroll To Index not working as expected',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  AutoScrollController _scrollController = AutoScrollController();

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance!.addPostFrameCallback((_) => _scrollController
        .scrollToIndex(2, preferPosition: AutoScrollPosition.begin));
    return Scaffold(
        appBar: AppBar(
          title: const Text('Text'),
        ),
        body: ListView(
          controller: _scrollController,
          children: [
            AutoScrollTag(
                key: ValueKey(0),
                controller: _scrollController,
                index: 0,
                child: Container(
                  height: 400,
                  color: Colors.red,
                )),
            AutoScrollTag(
                key: ValueKey(1),
                controller: _scrollController,
                index: 1,
                child: Container(
                  height: 400,
                  color: Colors.black26,
                )),
            AutoScrollTag(
                key: ValueKey(2),
                controller: _scrollController,
                index: 2,
                child: Container(
                  height: 400,
                  color: Colors.yellow,
                )),
            AutoScrollTag(
                key: ValueKey(3),
                controller: _scrollController,
                index: 3,
                child: Container(
                  height: 400,
                  color: Colors.blue,
                )),
          ],
        ));
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

Thanks.

[jcblancomartinez]

Hi @jerrywell,

Have you been able to debug this issue?

Thanks.

[jcblancomartinez]

Thanks @jerrywell

It works like a charm :)