Bouncing Animation
Complete Code For Bouncing Animation In Flutter
main.dart
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.light().copyWith(primaryColor: Colors.deepOrange),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({this.title});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController _animationController;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 600),
lowerBound: 0.0,
upperBound: 0.1,
);
_animationController.addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
double scale = 1 - _animationController.value;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
title: Text("Bouncing Animation")),
body: Center(
child: GestureDetector(
onTapUp: _onTapUp,
onTapDown: _onTapDown,
child: Transform.scale(
scale: scale,
child: Container(
width: 300,
height: 75,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(38.0),
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0.0, 2.0),
blurRadius: 5.0,
spreadRadius: 0.25,
),
],
),
child: Text("Tap to Bounce"),
alignment: Alignment.center,
),
),
),
),
);
}
void _onTapDown(TapDownDetails details) {
_animationController.forward();
}
void _onTapUp(TapUpDetails details) {
_animationController.reverse();
}
}