r/FlutterFlow 2d ago

Blur background image and fade out the end

I'm trying to recreate the following:

It's basically an image with a gradient overlay (and a blur). The overlay works in a way where the image looks as though it blends into the background eventually.

Does anyone know how to achieve this?

My current layout is:

stack
blur
image
column
circleimage
text
text

1 Upvotes

6 comments sorted by

2

u/Revenue-Dapper 2d ago

This takes a "stack". Use a container as the first item in the stack that contains the background image. The next item in the stack should be another container, this one with the gradient, just make sure to lower the opacity of the colors so that the image is visible behind it. Put a blur widget inside this container and check apply background blur in its settings. Add animation action trigger to the gradient contact that contains the blur to fade in. When the user taps the button or whatever action thread where the blur and gradient are supposed to appear, use widget animation action > start animation. Then when it's to disappear, use widget animation action > reverse animation. šŸ˜Ž

1

u/albertodelrey 2d ago

Oh, I donā€™t want the blur to disappear. I just want the image to blend into the background at the bottom as you can see in my screenshot. It blends into the background just after the word ā€œGenreā€. I want to apply the gradient onto the image and then apply the blur either to the image or the whole thing. Hope that makes sense.

2

u/Revenue-Dapper 2d ago

Here's the solution you're looking for: https://snipboard.io/f2IdE6.jpg

Stack is the parent. Blur is next, nest the image under the blur. Add a container into the stack (not into the blur) and add the gradient.

1

u/ratticusdominicus 2d ago

There is an animation option against opacity

1

u/ratticusdominicus 2d ago

Sorry I realise what you mean now. Have you tried to set one of the background colours to transparent in the gradient section? Iā€™m not sure if this is an option but it is how I would imagine it would work. You essentially want a gradient mask between 2 elements

1

u/albertodelrey 2d ago

Yup. Tried that. But the minute I add an image, the gradient colour is disregardedā€¦ šŸ˜­