Types of animations in Flutter and its implementation

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: AnimatedOpacity(
duration: Duration(milliseconds: 500),
opacity: isView ? 0.0 : 1.0,
child: InkWell(
onTap: () => setState(() => isView = !isView),
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: AnimatedOpacity(
duration: Duration(milliseconds: 2000),
opacity: isView ? 0.0 : 1.0,
curve: Curves.bounceIn,
child: InkWell(
onTap: () => setState(() => isView = !isView),
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
),
);
}
class _MyAppState extends State<MyApp> {
bool isView = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: AnimatedOpacity(
duration: Duration(milliseconds: 400),
opacity: isView ? 0.0 : 1.0,
curve: ExampleCurve(),
child: GestureDetector(
onTap: () => setState(() => isView = !isView),
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
),
);
}
}

class ExampleCurve extends Curve {
final double count;

ExampleCurve({this.count = 3});

@override
double transformInternal(double t) {
var val = sin(count * 2 * pi * t) * 0.5 + 0.5;
return val;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Stack(
alignment: Alignment.centerLeft,
children: [
AnimatedPositioned(
left: position,
duration: Duration(milliseconds: 400),
child: Image.network( 'https://cdn.pixabay.com/photo/2012/04/11/17/34/car-29078_640.png',
width: 200.0,
),
),
],
),
floatingActionButton: FloatingActionButton(
child: Text('GO!'),
onPressed: () {
setState(() {
position += 40;
});
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: SizedBox(
width: 200.0,
height: 200.0,
child: InkWell(
onTap: () => setState(() => isChangeWidget = !isChangeWidget),
child: AnimatedCrossFade(
crossFadeState: isChangeWidget ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: const Duration(seconds: 2),
firstChild: Container(color: Colors.green),
secondChild: Container(color: Colors.red),
),
),
),
),
);
}
bool startAnimation = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: InkWell(
onTap: () => setState(() => startAnimation = !startAnimation),
child: AnimatedContainer(
decoration: BoxDecoration(
color: startAnimation ? Colors.lightGreen : Colors.red,
borderRadius: BorderRadius.circular(startAnimation ? 15.0 : 0.0),
),
width: startAnimation ? 100 : 200,
height: startAnimation ? 100 : 200,
curve: Curves.easeInOutCubic,
duration: Duration(seconds: 1),
),
),
),
);
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
AnimationController _animationController;

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: InkWell(
onTap: () => _animationController.forward(),
child: Opacity(
opacity: 1.0 - _animationController.value,
child: Container(
color: Colors.orange,
height: 200.0,
width: 200.0 + (200 * _animationController.value),
),
),
),
);
}
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation<Color> _animation;

@override
void initState() {
_animationController = AnimationController(duration: Duration(milliseconds: 400), vsync: this);
_animation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_animationController);
_animationController.addListener(() => setState(() {}));
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: InkWell(
onTap: () => _animationController.repeat(),
child: Container(
width: 200.0,
height: 200.0,
color: _animation.value,
),
),
),
);
}
}
class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
AnimationController _colorController;
AnimationController _sizeController;

Animation<Color> _colorAnimation;
Animation<double> _sizeAnimation;

@override
void initState() {
_colorController = AnimationController(duration: Duration(milliseconds: 1000), vsync: this);
_sizeController = AnimationController(duration: Duration(milliseconds: 1000), vsync: this);

_colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_colorController);
_sizeAnimation = Tween<double>(begin: 200.0, end: 300.0).animate(_sizeController);

_colorController.addListener(() => setState(() {}));
_sizeController.addListener(() => setState(() {}));

_colorController.addStatusListener((status) {
if (status == AnimationStatus.completed) _sizeController.forward();
});
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation example')),
body: Center(
child: InkWell(
onTap: () => _colorController.forward(),
child: Container(
color: _colorAnimation.value,
height: _sizeAnimation.value,
width: _sizeAnimation.value,
),
),
),
);
}
}

We are a team of rock-star developers, which provides fully-flexible and powerful products 💥.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store