suggestion: support translucent blur background like CupertinoPopupSurface about modal_bottom_sheet HOT 7 OPEN

@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.

from modal_bottom_sheet.

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

from modal_bottom_sheet.

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.

from modal_bottom_sheet.

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).

from modal_bottom_sheet.

@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.

from modal_bottom_sheet.

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

from modal_bottom_sheet.

@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.

from modal_bottom_sheet.