Quick Flutter Design #2 - Eye Catcher Container

For this second Quick Flutter Design, I wanted to explore an animation that can be really easy to do in Flutter. Sometime you might want to make something bounce in to attract the user's attention.

In this design, I'm using a SlideTransition to realise the following design:

It's linked to an animation controller with an elasticIn curve.

  late final AnimationController _controller = AnimationController(
    duration: const Duration(milliseconds: 2500),
    vsync: this,
  )..reverse(from: 1);
  late final Animation<Offset> _offsetAnimation = Tween<Offset>(
    begin: Offset.zero,
    end: const Offset(0, 1.5),
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.elasticIn,
  ));

To create the blurred background effect, you can use the built in BackdropFilter

BackdropFilter(
	filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
    ...

Code