This is a simple demo showing how you can animate views in flutter using very little code.
Watch Video Tutorial
Here is the simple code in which I am showing all basic functions in different different functions. You can call these methods in the build method and execute all.
import 'package:flutter/material.dart';
import 'package:animator/animator.dart';
import 'dart:math';
class AnimationDemo extends StatefulWidget {
AnimationDemo() : super();
final String title = "Flutter Animation";
@override
AnimationDemoState createState() => AnimationDemoState();
}
class AnimationDemoState extends State<AnimationDemo> {
//
final logo = FlutterLogo(
size: 100,
);
// Animate Opacity
Widget animateOpacity() {
return Animator(
// repeats: 5,
cycles: 2 * 5, // forward and backward 5 times
builder: (anim) => Opacity(
opacity: anim.value,
child: logo,
),
);
}
// Animate FadeTransition
Widget animateFadeIn() {
return Animator(
duration: Duration(seconds: 1),
curve: Curves.elasticOut,
// repeats: 5,
cycles: 0, // infinite
builder: (anim) => FadeTransition(
opacity: anim,
child: logo,
),
);
}
// Transform Scale
Widget transformScale() {
return Animator(
duration: Duration(seconds: 3),
cycles: 0,
builder: (anim) => Transform.scale(
scale: anim.value,
alignment: Alignment.bottomRight,
child: logo,
),
);
}
// Transform Scale
Widget transformScale2() {
return Animator(
tween: Tween<double>(begin: 0.5, end: 1.5),
duration: Duration(seconds: 2),
curve: Curves.elasticOut,
cycles: 0,
builder: (anim) => Transform.scale(
scale: anim.value,
alignment: Alignment.bottomRight,
child: logo,
),
);
}
// Size Transition
Widget sizeTransition1() {
return Animator(
duration: Duration(seconds: 3),
cycles: 0,
builder: (anim) => SizeTransition(
sizeFactor: anim,
child: logo,
),
);
}
// Size Transition
Widget sizeTransition2() {
return Animator(
duration: Duration(seconds: 3),
cycles: 0,
builder: (anim) => SizeTransition(
axis: Axis.horizontal,
sizeFactor: anim,
child: logo,
),
);
}
// Size Transition
Widget sizeTransition3() {
return Animator(
duration: Duration(seconds: 3),
cycles: 0,
builder: (anim) => SizeTransition(
axis: Axis.horizontal,
axisAlignment: -1,
sizeFactor: anim,
child: logo,
),
);
}
// Size Transition
Widget sizeTransition4() {
return Animator(
tween: Tween<double>(begin: 0.5, end: 1.5),
duration: Duration(seconds: 3),
cycles: 0,
builder: (anim) => SizeTransition(
axis: Axis.horizontal,
axisAlignment: 1,
sizeFactor: anim,
child: logo,
),
);
}
// Rotate Animation
Widget rotate() {
return Animator(
tween: Tween<double>(begin: 0, end: 2 * pi),
duration: Duration(seconds: 3),
cycles: 0,
builder: (anim) => Transform.rotate(
angle: anim.value,
child: logo,
),
);
}
// Rotate Animation
Widget rotate2() {
return Animator(
tween: Tween<double>(begin: 0, end: 2 * pi),
duration: Duration(seconds: 2),
cycles: 0,
curve: Curves.elasticOut,
builder: (anim) => Transform(
transform: Matrix4.rotationZ(anim.value),
alignment: Alignment.center,
child: logo,
),
);
}
// Rotate Animation
Widget rotate3() {
return Animator(
tween: Tween<double>(begin: 0, end: 3),
duration: Duration(seconds: 2),
repeats: 0,
builder: (anim) => Transform(
transform: Matrix4.rotationZ(anim.value),
alignment: Alignment.center,
child: logo,
),
);
}
// Rotate Animation
Widget rotate4() {
return Animator(
tween: Tween<double>(begin: 0, end: 3),
duration: Duration(seconds: 2),
repeats: 0,
builder: (anim) => RotationTransition(
turns: anim,
alignment: Alignment.center,
child: logo,
),
);
}
// Skew Animation
Widget skew1() {
return Animator(
tween: Tween<double>(begin: 0, end: 3),
duration: Duration(seconds: 2),
repeats: 0,
builder: (anim) => Transform(
transform: Matrix4.skewX(anim.value),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
),
),
child: logo,
),
),
);
}
// Skew Animation
Widget skew2() {
return Animator(
tween: Tween<double>(begin: -0.5, end: 0.5),
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => Transform(
transform: Matrix4.skew(anim.value, anim.value),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
),
),
child: logo,
),
),
);
}
// Skew Animation
Widget skew3() {
return Animator(
tween: Tween<Offset>(begin: Offset(-1, 0), end: Offset(1, 0)),
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => FractionalTranslation(
translation: anim.value,
child: logo,
),
);
}
// Scale From Center
Widget scaleFromCenter() {
return Animator(
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => SizedBox(
width: anim.value * 50,
height: anim.value * 50,
child: logo,
),
);
}
// Translate Animations
Widget translate1() {
return Animator(
tween: Tween<Offset>(
begin: Offset(-50, 0),
end: Offset(50, 0),
),
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => Transform.translate(
offset: anim.value,
child: logo,
),
);
}
// Translate Animations
Widget translate2() {
return Animator(
tween: Tween<Offset>(
begin: Offset(-1, 0),
end: Offset(1, 0),
),
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => SlideTransition(
position: anim,
child: logo,
),
);
}
// Transform Animations
Widget transform1() {
return Animator(
tween: Tween<Offset>(
begin: Offset(-50, 0),
end: Offset(50, 0),
),
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => Transform(
transform: Matrix4.translationValues(anim.value.dx, 0, 0),
child: logo,
),
);
}
// Transform Animations
Widget transform2() {
return Animator(
duration: Duration(seconds: 2),
curve: Curves.bounceInOut,
cycles: 0,
builder: (anim) => Transform(
transform: Matrix4.translationValues(anim.value * 100, 0, 0)
..rotateZ(anim.value * 4 * pi),
child: logo,
),
);
}
// Transform Animations
Widget transform3() {
return Animator(
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => Transform(
transform: Matrix4.translationValues(anim.value * 100, 0, 0)
..rotateZ(anim.value * 4 * pi),
child: logo,
),
);
}
// Transform Animations
Widget transform4() {
return Animator(
duration: Duration(seconds: 2),
cycles: 0,
builder: (anim) => Transform(
transform: Matrix4.translationValues(anim.value * 100, 0, 0)
..rotateZ(anim.value * 4 * pi)
..scale(anim.value),
child: logo,
),
);
}
Widget opacityWithTranslationRotation() {
return Animator(
tweenMap: {
'opacity': Tween<double>(begin: 0, end: 1),
'translation': Tween<Offset>(begin: Offset.zero, end: Offset(1, 0)),
'rotation': Tween<double>(begin: 0, end: 4 * pi),
},
duration: Duration(seconds: 2),
cycles: 0,
builderMap: (Map<String, Animation> anim) => FadeTransition(
opacity: anim['opacity'],
child: FractionalTranslation(
translation: anim['translation'].value,
child: Transform.rotate(
angle: anim['rotation'].value,
child: logo,
),
),
),
);
}
Widget opacityWithTranslationRotationColor() {
return Animator(
tweenMap: {
'opacity': Tween<double>(begin: 0, end: 1),
'translation': Tween<Offset>(begin: Offset.zero, end: Offset(1, 0)),
'rotation': Tween<double>(begin: 0, end: 4 * pi),
'color': ColorTween(begin: Colors.blueAccent, end: Colors.redAccent),
},
duration: Duration(seconds: 2),
cycles: 0,
builderMap: (Map<String, Animation> anim) => FadeTransition(
opacity: anim['opacity'],
child: FractionalTranslation(
translation: anim['translation'].value,
child: Transform.rotate(
angle: anim['rotation'].value,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: anim['color'].value,
shape: BoxShape.circle,
),
),
],
),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: opacityWithTranslationRotationColor(),
),
),
);
}
}