how can i make bell notification icon animated in flutter

Viewed 3964
2 Answers

This animates the flutter alarm icon to shake a couple times you can play some of the variable to get the effect how you want it. This is like the second example you provided as for the first you would need a custom icon where you could animate just that part of the icon.

 AnimationController _animationController;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    super.initState();
  }

  void _runAnimation() async {
    for (int i = 0; i < 3; i++) {
      await _animationController.forward();
      await _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RotationTransition(
                turns: Tween(begin: 0.0, end: -.1)
                    .chain(CurveTween(curve: Curves.elasticIn))
                    .animate(_animationController),
                child: Icon(Icons.alarm)),
            RaisedButton(
              child: Text('Run Animation'),
              onPressed: () => _runAnimation(),
            )
          ],
        ),
      ),
    );

If you need further explanation on how this works let me know.

You can use this animated_widget flutter package: animated_widget flutter package

For Shake:

ShakeAnimatedWidget(
  enabled: this._enabled,
  duration: Duration(milliseconds: 1500),
  shakeAngle: Rotation.deg(z: 40),
  curve: Curves.linear,
  child: FlutterLogo(
    style: FlutterLogoStyle.stacked,
  ),
),
Related