FR: Support additional top bar customization (especially features based on scroll position)

[auradigitaldev]

Today the top bar can only be customized somewhat. You can insert a custom widget into the top_bar field but it's limiting - even the padding isn't customizable. Top requests for improving usage of top bar:

1. Add support for top bar divider behavior on scroll, i.e. only showing the top bar shadow when the page is not in the default scroll position.
2. Allow the user to provide different/custom top bar dividers, other than the elevation shadow currently provided (e.g. if the user wants to use a hairline or gradual linear gradient fade to separate the top bar from the page instead of a shadow, or use Google's material approach where there entire top bar changes color when leaving the default scroll position)

[ulusoyca]

Today, you can customize further the scrolling animation specs as explained in ReadMe. This is the API docs.

only showing the top bar shadow

This is not there yet, but could be added. If you decide to be the contributor, I can guide you the action items.

Allow the user to provide different/custom top bar dividers, other than the elevation shadow currently provided (e.g. if the user wants to use a hairline or gradual linear gradient fade to separate the top bar from the page instead of a shadow, or use Google's material approach where there entire top bar changes color when leaving the default scroll position)

Would this example help?

cus_top.mov

[auradigitaldev]

Thanks for the example! What I had in mind is slightly different - I want the top bar to be sticky (always visible), but for the color/shadow to change when the content has been scrolled. The end effect is that for modals with content that doesn't need to be scrolled, the top bar looks like a normal heading, and for modals that need scrolling we have a clear separation between header and content that only becomes visible when scrolling.

If this doesn't exist I'm happy to be guided on action items, and I'll contribute when I can find the time.

[ulusoyca]

Ok, let's try this:

1. Provide a custom top bar
2. Wrap the custom top bar with Theme widget and add WoltModalSheetThemeData extension as in this example: link
3. Wrap the theme widget with NotificationListener(link) and listen for scroll events.
4. Rebuild the the theme widget and assign [this] value of the extension data (https://github.com/woltapp/wolt_modal_sheet/blob/main/lib/src/theme/wolt_modal_sheet_theme_data.dart#L17) value: topBarShadowColor

not sure if this is gonna work, but I have a feeling like it should. PLease let me know.

[auradigitaldev]

Hey, sorry for the late response on this, took a detour for other features in the app.

I tried this out, but IIUC NotificationListener only listens to notifications that bubble up from its children - did you want me to add this somewhere in the WoltModalSheet code? Otherwise, I wasn't sure how to listen to the modal scroll - for example, using the pageListBuilder means that I'm simply providing a list of WoltModalSheetPages, and modal scrolling is handled automatically by the package.

[auradigitaldev]

Alternatively, if it's more straightforward is there a way to set the max height constraints of the modal such that the "modal content" never scrolls but I can write my own header and SingleChildScrollView (with ScrollController) and control the logic that way? I tried simply using mainContentScrollPhysics: NeverScrollableScrollPhysics() but this doesn't work on its own without being able to use the constraint.

[ulusoyca]

@auradigitaldev

a way to set the max height constraints of the modal such that the "modal content" never scrolls

Have you seen NonScrollingWoltModalPage

[ulusoyca]

I wasn't sure how to listen to the modal scroll
Have you tried providing scroll controller to a page?

[auradigitaldev]

Sorry, I closed this issue via misclick - could this be reopened?

Have you seen NonScrollingWoltModalPage

When I try to use this, all my modals become max height by default even if the content is short.

I think the closest behavior to what I'm trying to accomplish is having the following:

WoltModalSheetPage(
    child: ConstrainedBox(
        constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 17 / 20),
        child: [...] )))

Where [...] is where the implementation of the changing header and scrolling view are contained. This results in a page that can expand up to a maximum height, but if using a Flexible(SingleChildScrollView()) can still expand and be scrollable.

The issue with this approach is that the maxHeight has to be defined manually and if it's greater than the max height of the modal sheet, part of the content gets cut off - is there a way to match the constraints of the modal sheet without explicitly setting our own max height?

Have you tried providing scroll controller to a page?

In this case, do you mean providing a ScrollController to the modal content and then updating a ValueNotifier that's readable by both the modal top bar and the modal content, and listened to by the modal top bar?

[ulusoyca]

When I try to use this, all my modals become max height by default even if the content is short.

This is because you have a Flexible widget in your child (Row, Column). You can try SingleChildScrollView with shrinkWrap true if your list is not huge.

A better way of achieving this behavior is using modalTypeBuilder where you can use your own modal with custom layout constraints.

this is what you have.

WoltModalSheetPage(
    child: ConstrainedBox(
        constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 17 / 20),
        child: [...] )))

I suggest this:
1- Dynamically build your modal constraints depending on current constraints.
2- Come up with your own modal page type as in here.

[auradigitaldev]

Sadly there's no shrinkWrap property in SingleChildScrollView. (edit: actually using ListView with shrinkWrap: true also doesn't seem to work within NonScrollingWoltModalSheetPage).

Thanks for the link to modal page types - it looks like that would be a good route to go if I wanted to change the modal sheet layout constraints. But if I'm happy with the 90% max height that the modal sheet provides by default, is there any way to make sure those constraints get sent down to the child? It seems like this is done in the NonScrollingWoltModalSheetPage but I can't seem to find a way to make that modal height shrink to fit content that doesn't take up the full height.