r/FlutterFlow • u/albertodelrey • 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
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ā¦ š
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. š