Flutter How to achieve Gaussian blur in AE?

Question

I'm using BackdropFilter to achieve Gaussian blur, but the effect is completely different from AE.

The picture before using Gaussian blur is like this:

My code is like this:

BackdropFilter(
  filter: ImageFilter.blur(
      sigmaX: sigma.value,
      sigmaY: sigma.value,
  ),
  child: child,
)

The effect is like this:

But the effect of AE is like this:

The effect of AE looks blurrier and BackdropFilter is implemented more like frosted glass. How can I achieve the effect of AE? I have used BoxShadow, but it can only do shadows for the surroundings, not the overall look more blurred

I've tried the opacity of the image, and the sigma, but nothing works

final Animation<double> opacity = TweenSequence<double>(
  <TweenSequenceItem<double>>[
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(0.0),
      weight: 20,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(
        begin: 0.0,
        end: 0.2,
      ).chain(CurveTween(curve: Curves.linear)),
      weight: 36,
    ),
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(0.2),
      weight: 4,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(
        begin: 0.2,
        end: 0.06,
      ).chain(CurveTween(curve: Curves.linear)),
      weight: 4,
    ),
    TweenSequenceItem<double>(
      tween: ConstantTween<double>(0.06),
      weight: 12,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(
        begin: 0.06,
        end: 0.12,
      ).chain(CurveTween(curve: Curves.linear)),
      weight: 24,
    ),
  ],
  ).animate(animationController);

  
final Animation<double> sigma = TweenSequence<double>(
<TweenSequenceItem<double>>[
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(80),
    weight: 20,
  ),
  TweenSequenceItem<double>(
    tween: Tween<double>(
      begin: 80,
      end: 50,
    ).chain(CurveTween(curve: Curves.linear)),
    weight: 36,
  ),
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(50),
    weight: 8,
  ),
  TweenSequenceItem<double>(
    tween: Tween<double>(
      begin: 50,
      end: 20,
    ).chain(CurveTween(curve: Curves.linear)),
    weight: 12,
  ),
  TweenSequenceItem<double>(
    tween: ConstantTween<double>(20),
    weight: 24,
  ),
],
).animate(animationController);

have you tried fiddeling with the opacity of the image and also can you share your sigma values? have you tried various sigma values or not? — Risheek Mittal, Nov 24 '22 at 04:44
@RisheekMittal Yes, I've tried opacity and sigma, but neither works. — Nullable, Nov 24 '22 at 06:08
Can you provide complete code? or just sigma values and what is that child — Risheek Mittal, Nov 24 '22 at 06:11
I think the Gaussian blur achieved by AE has a shadow effect, but if I actively add shadows, although the surrounding effect is achieved, the middle part is still not blurred enough, more like a glass effect. — Nullable, Nov 24 '22 at 06:23
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249853/discussion-between-risheek-mittal-and-nullable). — Risheek Mittal, Nov 24 '22 at 06:34

score 0 · Answer 1 · answered Nov 24 '22 at 06:34

I have tried and achieved pretty much the same thing myself by fiddling with opacity , sigma and using Stack, try this if this is what you want:

      Stack(
        alignment: Alignment.center,
        children: [
          Opacity(
            opacity: 0.5,
            child: Image.asset(
              'assets/blur.png',
              width: 300,
            ),
          ),
          BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(
                color: Colors.white.withOpacity(0.5),
              )),
        ],
      ),

Your code is very similar to mine, but it doesn't achieve what I want — Nullable, Nov 24 '22 at 07:17

Flutter How to achieve Gaussian blur in AE?

1 Answers1