modal_bottom_sheet

modal_bottom_sheet copied to clipboard

Relevant code: https://github.com/flutter/flutter/blob/4d7525f05c05a6df0b29396bc9eb78c3bf1e9f89/packages/flutter/lib/src/cupertino/dialog.dart#L359-L365

I guess it wouldn't work to utilize CupertinoPopupSurface since it has the border radius on the bottom as well.

Apple's utilizing this translucent blur effect in an increasing amount of overlays, so it might be nice to have this as an option.

Additional notes: Currently, for my use case (in dark mode with a Scaffold background of black to match Apple's defaults), there's no real discernible difference between the original content and the default showCupertinoModalBottomSheet overlay (since _CupertinoBottomSheetContainer also uses the Scaffold background of black).

Hello, while this option is not pre-built for the modal you can still use backdrop blur filter with the modal. Just make the backgroundColor param transparent.

There is an example using it here cupertino_share.dart#L83

For the second comment, I will try to make to make the back route lighter when the modal pops up in dark mode. Using the ColorFiltered widget should solve this.

@jamesblasco I trying to implement the ColorFilter, but currently not happy with it. Also I don´t have any idea yet how to detect if darkmode is active. Because in lightmode the color changes from white to a light gray on the native components, so I need a different Color or BlendMode. But will try some more things.

Thanks for trying it out.

You can get the brightness of the Theme and the platformBrightness

MediaQuery.of(context).platformBrightness

Theme.of(context).brightness

I would suggest to use the theme one, maybe to allow to set a custom brightness as a param, don’t know yet

@jamesblasco With regards to the making it lighter, I looked into how Apple's Mail app handles it...

They use https://github.com/flutter/flutter/blob/4d7525f05c05a6df0b29396bc9eb78c3bf1e9f89/packages/flutter/lib/src/cupertino/colors.dart#L448-L449

This corresponds to the hex value of #1C1C1E, but when it fades and has the dark mask effect, it darkens to #141415 as shown below.

It seems Apple ultimately uses the systemBackground elevatedColor for both the original view and the popup, which is noticeable when you slide the draft downward. It doesn't dismiss the draft, but leaves it as a card below the original view (with both having elevatedColor until you discard the draft.

@cpboyd Thanks, this is a nice catch. Using the elevatedColor and defining the UserInterfaceLevel should make the darkmode detection unnessecary. I will try this and if it works as expected I will open an PR for it.