Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make animation bouncing on tap with flutter

I try to make a single boucing animation( quick growing up and down ) when I tap on a button.

like this exemple :

enter image description here

I succeded to make the boucing animation but I don't succeded to make working on tap because my icone button is always display, I search only to make this icone button growing up and down after on tap, without disappear

like image 805
Nitneuq Avatar asked Jun 16 '18 16:06

Nitneuq


1 Answers

SOURCE

void main() => runApp(MaterialApp(home: Avatar()));

class Avatar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Avatar();
}

class _Avatar extends State<Avatar> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(duration: const Duration(milliseconds: 700), vsync: this);
    _controller.repeat(reverse: true);
  }
  
  @override
  void dispose(){
     super.dispose();
     this._controller.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Align(
            child: ScaleTransition(
              scale: Tween(begin: 0.75, end: 2.0)
                .animate(CurvedAnimation(
                  parent: _controller, 
                  curve: Curves.elasticOut
                )
              ),
              child: SizedBox(
                height: 100,
                width: 100,
                child: CircleAvatar(backgroundImage: AssetImage(chocolateImage)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
like image 80
DolDurma Avatar answered Oct 10 '22 08:10

DolDurma