Make scrollToMessage/scrollToIndex work properly even if a non-empty List<Message> is not passed to the messages instance variable of ChatController

[avith-tmorishita]

Description
If you don't pass a value to the messages instance variable of ChatController or pass an empty List, executing scrollToMessage and scrollToIndex will not scroll to the specified message or index.

Platform
Web(Chrome)
*I have'nt checked it on Web other than Chrome, or on iOS or Android.

Steps to Reproduce

1. Add a message using insertMessage.
2. Execute scrollToMessage/scrollToIndex.

pubspec.yaml Excerpt from package's example

flutter:
  sdk: flutter
flutter_chat_core: ^2.4.0
flutter_chat_ui: ^2.3.1
flyer_chat_file_message: ^2.1.6
flyer_chat_image_message: ^2.1.7
flyer_chat_system_message: ^2.1.6
flyer_chat_text_message: ^2.2.1
flyer_chat_text_stream_message: ^2.1.6

pubspec.yaml Excerpt from my project

flutter:
  sdk: flutter
flutter_chat_ui: ^2.3.1
flutter_chat_core: ^2.4.0
flyer_chat_file_message: ^2.1.6
flyer_chat_image_message: ^2.1.7
flyer_chat_system_message: ^2.1.6
flyer_chat_text_message: ^2.2.1

This problem reproduces both in my project and in the local.dart of the package's example code.
It works properly if you pass a non-empty List to the ChatController's messages instance variable.
Thanks in advance for your help.

[nicolasbraun]

@demchenkoalex This is because _sliverListViewContext is null when the SliverViewObserver is first build.
and the whole Stack does not rebuild on insert, just the list sliver.

A possible fix, in itemBuilder

  if (_sliverListViewContext == null) {
    setState(() {
      _sliverListViewContext = context;
    });
  }

or a ValueListenable but seems overkill since the Observer wraps it all we call rebuild the whole widget

[demchenkoalex]

I don't understand how you can scroll to something when you have an empty messages list and you add a single message - scroll is not even working at this point? Not sure how to reproduce this and what is the desired effect. @avith-tmorishita can you check possible fix provided by Nicolas?

replace this line

_sliverListViewContext ??= context;

with

if (_sliverListViewContext == null) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (mounted) {
      setState(() {
        _sliverListViewContext = context;
      });
    }
  });
}

and let me know if this fixes the issue.

[nicolasbraun]

Hey @demchenkoalex

I think the way to reproduce is to

• start an empty chat ( so _sliverListViewContext is null)
• insert several messages
• scroll to => KO

[avith-tmorishita]

@demchenkoalex
I replaced that line but it still didn't fix it.

The steps to reproduce are as @nicolasbraun said.

An easy way to reproduce this is to add the following to ComposerActionBar in local.dart of the package examples, and then tap it after sending a few messages.

[nicolasbraun]

This is indeed not enough.

I used this composer to test

 Composer(
            topWidget: ComposerActionBar(
              buttons: [
                ComposerActionButton(
                  icon: Icons.type_specimen,
                  title: 'Scroll to 10',
                  onPressed: () => _chatController.scrollToIndex(10),
                ),
                ComposerActionButton(
                  icon: Icons.shuffle,
                  title: 'Send random',
                  onPressed: () => _addItem(null), // Fire 10+ then tap scrollTo
                ),
                ComposerActionButton(
                  icon: Icons.delete_sweep,
                  title: 'Clear all',
                  onPressed: () => _chatController.setMessages([]),
                  destructive: true,
                ),
              ],
            ),
          ),

We also need to notify the the Observer to rebuild.
I'll make a PR you can build onto

[avith-tmorishita]

@nicolasbraun
I built it with your PR and it seems to scroll just fine.
Thank you so much!!

[nicolasbraun]

You are most welcome, just realized a forgot to dispose of the notifier, if you wanna grab the updated PR.

…

On Tue, 17 Jun 2025 at 02:40, avith-tmorishita ***@***.***> wrote: *avith-tmorishita* left a comment (flyerhq/flutter_chat_ui#793) <#793 (comment)> @nicolasbraun <https://github.com/nicolasbraun> I built it with your PR and it seems to scroll just fine. Thank you so much!! — Reply to this email directly, view it on GitHub <#793 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIJ6UY7H4DF5WCYFQMTFSD3D5W2HAVCNFSM6AAAAAB6B2327SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNZYGY2TEOJUGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[avith-tmorishita]

I'm okay, thank you.
I will wait for the PR to be approved.

[demchenkoalex]

sorry guys - the last few weeks at work have been exhausting, so I haven’t had much time for open source. I’ll be back as soon as I wrap up a big task I’m working on (hopefully next week)

[demchenkoalex]

fixed here 1948c1f ✅