Allow floating dateDivider to be above the messages

[duzenko]

Which packages are you using?

stream_chat_flutter

On what platforms did you experience the issue?

Android

What version are you using?

latest

What happened?

the custom floating date overlaps and blends with the messages

Steps to reproduce

Use custom divider text

Supporting info to reproduce

Relevant log output

No response

Flutter analyze output

No response

Flutter doctor output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct #889

[deven98]

Hi @duzenko,

Assuming I have understood your bug correctly, here is some more information about date dividers:

The MessageListView keeps two types of date dividers - ones that are embedded in the listview and the second is a floating date divider which changes once it passes an embedded date divider beneath it. The one which you have mentioned that overlaps with the messages is the floating date divider.

You can either choose to turn off the floating date dividers like this:

    MessageListView(
        showFloatingDateDivider: false,    
    ),

OR you can add some kind of background to the date dividers like this to not make it look overlapping with the messages:

    MessageListView(
        dateDividerBuilder: (dt) {
            return Center(
                child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 1),
                    decoration: BoxDecoration(
                        color: Colors.white.withOpacity(0.7),
                        borderRadius: BorderRadius.circular(8),
                    ),
                    child: Text(
                        'Your text here',
                    ),
                ),
            );
        },
    ),

Let me know if this makes sense or if you think I may have misunderstood the issue at hand.

[duzenko]

Thanks, the two workarounds are kinda obvious
I was wondering if you can make the floating date to show above the messages, not on top of them

[imtoori]

Hi @duzenko
can you elaborate more on this? I'm not getting it, thanks

[duzenko]

Hi @duzenko can you elaborate more on this? I'm not getting it, thanks

Use a Column instead of Stack

[imtoori]

we have a date divider in a column. In your screenshot December 28 is not in a Stack, and it's above the message, isn't it?

[duzenko]

"August 3" on top is in a stack

[imtoori]

yes, that's the floating date divider that shows you the current timestamp you're on.
You can remove that as @deven98 mentioned here

Am I missing something?

[deven98]

Just for some clarification: Both date dividers exist at the same time by default - as shown in your screenshot. If you don't allow the floating date divider, it will still show as column instead of a stack. If this is still confusing, you can send us a basic wireframe for us to understand better.

[duzenko]

If the floating date is disabled then the first messages show up without date at all

[deven98]

Hi @duzenko,

Would having the first messages with the date solve your issue?

[duzenko]

Hi @duzenko,

Would having the first messages with the date solve your issue?

I think so, however it's not very clear what you mean

[imtoori]

hey @duzenko
you could use the MessageListView.headerBuilder parameter like this

                  showFloatingDateDivider: false,                  
                  headerBuilder: (context) {
                    final date = StreamChannel.of(context)
                        .channel
                        .state
                        ?.messages
                        .first
                        .createdAt;
                    if (date == null) {
                      return const Offstage();
                    }
                    return DateDivider(
                      dateTime: date,
                    );
                  },

Let me know if that works for you

[duzenko]

I think that's an okayish workaround
Ideally I would like an option for the floating date to not overlap with the messages

[imtoori]

I don't think this makes a lot of sense, but I think I know how to help you with this
For now please use our workaround, I'll find a way of adding the date divider to the top when you disable the floating one

[rohan20]

@imtoori Would it be possible to provide showFloatingDateDivider on top of stream_chat_flutter: ^2.0.0-nullsafety.2?

stream_chat_flutter: ^2.0.0-nullsafety.2 is the only version we are compatible with. We just upgraded from stream_chat_flutter: ^1.5.6 but it seems that this flag was only made available on stream_chat-v2.0.1. This is a critical issue for us and earlier you helped us get this flag as a hotfix on ^1.5.6. Would be immensely helpful if you could do something similar on top of stream_chat_flutter: ^2.0.0-nullsafety.2.

Happy to open a PR if you like:

if (widget.showScrollToBottom) _buildScrollToBottom(),
if (widget.showFloatingDateDivider) ...{
  Positioned(
     ...
   );
},

[imtoori]

@rohan20 do you want to hide the date divider? that's why you need it, right?

[rohan20]

@imtoori Yes. We want to set showFloatingDateDivider to false.

[rohan20]

@imtoori Just checking if you have a decision on this? :)

[xsahil03x]

Hey @rohan20, we are happy to receive a PR for this.
Can you make one and assign me as a reviewer?

Thanks,
Sahil

[rohan20]

Thanks @xsahil03x. I can do that. Can you please create a branch from the 2.0.0-nullsafety.2 git tag that I can base my PR on?

[xsahil03x]

@rohan20 sure, here you go https://github.com/GetStream/stream-chat-flutter/tree/release/2.0.0-nullsafety.2

[rohan20]

@xsahil03x I couldn't assign you as a reviewer (no rights I suppose), but here's the PR. Thanks!

[xsahil03x]

@rohan20 here's the new release: https://pub.dev/packages/stream_chat_flutter/versions/2.0.0-nullsafety.3-beta
tag: https://github.com/GetStream/stream-chat-flutter/tree/stream_chat_flutter-v2.0.0-nullsafety.3-beta