Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add blur option for overlay widgets #359

Open
goottime opened this issue Jan 17, 2025 · 3 comments
Open

Add blur option for overlay widgets #359

goottime opened this issue Jan 17, 2025 · 3 comments
Labels
type: ehancement A new feature or request

Comments

@goottime
Copy link

Is your feature request related to a problem? Please describe.
Recently, many design systems have been using blur in their designs. It is used as a material for overlay widgets such as dialogs, app bars, popovers, tooltips, nav bars and others. I'd like to see something like this in forui if it doesn't go against design principles

Describe the solution you'd like
I would like to see in forui the ability to customize blur in widgets that overlay. For example, for the Bottom Nav Bar, the content could be behind it and blurred. Also, so that using ThemeData you can adjust the radius of blur and blending

@goottime goottime added the type: ehancement A new feature or request label Jan 17, 2025
@Pante
Copy link
Member

Pante commented Jan 17, 2025

From what I'm reading, is the request for for overlay/elevated widgets such as popovers and dialogs to expose a parameter to blur the widgets below it? this Something similar to this:

Image

for the Bottom Nav Bar, the content could be behind it and blurred.

Also, so that using ThemeData you can adjust the radius of blur and blending

Could you elaborate on these? From what I understand, Material uses a translucent color without any blending to achieve the blur effect.

@goottime
Copy link
Author

In the photo, which you attached, the background is eroded behind the widget, and I want the very widget to have a blurry image of what is behind him. Here is an example from a similar library to Flutter.
Image
A similar approach is implemented by Apple, where any element that can overlap others has a blurred background.

IMG_1443.MP4

Similar to what I want to see can be seen in the haze library
If this does not contradict the design concepts of forui, then I would like to see a similar system in the library. You can make several ready-made materials (for example, like haze), which can be defined both in the theme and for each component separately. For custom settings, you can add the creation of your own material based on the opacity and blur radius values. I would like to see this for components: Bottom Navigation Bar, Header, Dialog, Sheet, Popover, Popover Menu, Tooltip, etc.
Image

@Pante
Copy link
Member

Pante commented Jan 31, 2025

I'm not really sure whether having translucent effects will fit in the library, what do you think @kawaijoe?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: ehancement A new feature or request
Projects
None yet
Development

No branches or pull requests

2 participants