jamesblasco / modal_bottom_sheet

Flutter | Create advanced modal bottom sheets. Material, Cupertino or your own style
https://pub.dev/packages/modal_bottom_sheet
MIT License
1.87k stars 471 forks source link

Dark mode with cupertino widget #138

Open SimonVillage opened 3 years ago

SimonVillage commented 3 years ago

We are using #000000 background in our dark mode theme. This leads to the following result

image

However, I was expecting something like this (the background color in iOS without bottom sheet open is black too, not gray):

IMG_1043

I tried controlling the background with backgroundColor and barrierColor but this did not lead to the result expected.

jamesblasco commented 3 years ago

Working on it. Right now the only solution would be to change the background color of the previous route before the one is being pushed

bierbaumtim commented 3 years ago

I was playing around a bit with this issue and I found a solution that works for me. So if you want you can try it with my fork: https://github.com/bierbaumtim/modal_bottom_sheet

But as I said it works for me but there could be some issues and customizations aren't possible.

jamesblasco commented 3 years ago

Yes indeed @bierbaumtim has been doing amazing research on the topic. I am not completely familiar with BlendMode but I think using lighten and darken would be a better choice.

As I can see in the native modal, it lightens up all the previous route while scrolling. You can see that with a backround completely dark.

Also for saturation, not all the page becomes grey, only primaryColor buttons, probably because they are disabled during an animation. We could implement something for this, but I don't think it would be useful if it is not integrated into the cupertino library itseld

SimonVillage commented 2 years ago

@bierbaumtim are you still interested in working on this? Your repository is a little bit behind. Would be great to see a PR from you to fix this issue.

I think that this is the main commit: https://github.com/bierbaumtim/modal_bottom_sheet/commit/c00e038150f7faae026772ea5bf990d6335afd1d

But you had also a few other changes and I am not sure if they are all required.

bierbaumtim commented 2 years ago

@SimonHausdorf I created a new PR #231 which only contains the nessecary changes to create the discussed result.

SimonVillage commented 2 years ago

I tried the demo with your changes, settings the CupertinoNavigationBar to black. Theoretically it should turn into a dark gray correct? Similar to mail app in dark mode when composing a new email?

https://user-images.githubusercontent.com/1446685/160324925-00682160-c2c3-4b80-8ab4-ad33c98e8ece.mov

bierbaumtim commented 2 years ago

It only works if use CupertinoDynamicColor because it contains colors when CupertinoUserInterfaceLevel is elevated. With normal colors it would result in an undefined behaviour. Also the example does not support darkmode very well. I opened a second PR #232 which add darkmode support for the example.

SimonVillage commented 2 years ago

Ok, the magic was making use of CupertinoTheme.of(context).scaffoldBackgroundColor. One thing, it seems like the color animation isn't working?

https://user-images.githubusercontent.com/1446685/161416816-52b50ed2-d445-4c8b-83ca-4f77e6afd986.mov

doug-orchard commented 6 months ago

can confirm, this is still a problem