Transform Animation Flutter Example
This article explains you how to use flutter transform animation widget to perform rotate, translate, scale and skew animations in flutter application. You can also check out flutter animations related articles.
We can perform above animations on any widget which we have to declare as child widget under flutter transform widget. Flutter Transform Widget has four types: Transform.rotate, Transform.translate, Transform.scale, Transform.skew.
In this flutter example, we are displaying scale, rotate, skew and translate animations with image on click of button. First we will show four buttons so we can perform each animation in separate screen on click.
Home Screen
import ‘package:fluttertransformanimsample/my_rotate_animation_Screen.dart’;
import ‘package:fluttertransformanimsample/my_scale_animation_screen.dart’;
import ‘package:fluttertransformanimsample/my_skew_animation_screen.dart’;
import ‘package:fluttertransformanimsample/my_translate_animation_Screen.dart’;
class MyHomeScreen extends StatefulWidget {
@override
_MyHomeScreenState createState() => _MyHomeScreenState();
}
class _MyHomeScreenState extends State<MyHomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Transform Widget Example’)),
body: Container(
margin: EdgeInsets.all(25),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ElevatedButton(
child: Text(‘Rotate’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.pinkAccent,
padding: EdgeInsets.all(15)
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MyRotateAnimationScreen()));
},
),
SizedBox(height: 30),
ElevatedButton(
child: Text(‘Translate’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.deepOrangeAccent,
padding: EdgeInsets.all(15)
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MyTranslateAnimationScreen()));
},
),
SizedBox(height: 30),
ElevatedButton(
child: Text(‘Scale’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.orangeAccent,
padding: EdgeInsets.all(15),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MyScaleAnimationScreen()));
}),
SizedBox(height: 30),
ElevatedButton(
child: Text(‘Skew’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.redAccent,
padding: EdgeInsets.all(15),
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MySkewAnimationScreen()));
},
),
],
),
),
);
}
}
Flutter Rotate Animation
class MyRotateAnimationScreen extends StatefulWidget {
@override
_MyRotateAnimationScreenState createState() => _MyRotateAnimationScreenState();
}
class _MyRotateAnimationScreenState extends State<MyRotateAnimationScreen> with SingleTickerProviderStateMixin {
AnimationController myAnimationController;
@override
void initState() {
super.initState();
myAnimationController = AnimationController(duration: Duration(seconds: 5), vsync: this);
myAnimationController.forward();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.pinkAccent,
child: AnimatedBuilder(
animation: myAnimationController,
child: Container(
child: Image.asset(‘images/codingwithdhrumil.png’),
),
builder: (context, widget) => Transform.rotate(
angle: myAnimationController.value * 5.5,
child: widget,
),
),
);
}
}
Flutter Translate Animation
class MyTranslateAnimationScreen extends StatefulWidget {
@override
_MyTranslateAnimationScreenState createState() => _MyTranslateAnimationScreenState();
}
class _MyTranslateAnimationScreenState extends State<MyTranslateAnimationScreen> with SingleTickerProviderStateMixin {
AnimationController myAnimationController;
@override
void initState() {
super.initState();
myAnimationController = AnimationController(duration: Duration(seconds: 5), vsync: this);
myAnimationController.forward();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.deepOrangeAccent,
child: AnimatedBuilder(
animation: myAnimationController,
child: Container(
child: Image.asset(‘images/codingwithdhrumil.png’),
),
builder: (context, widget) => Transform.translate(
offset: Offset(myAnimationController.value * 60, myAnimationController.value * 60),
child: widget,
),
),
);
}
}
Flutter Scale Transform Animation
class MyScaleAnimationScreen extends StatefulWidget {
@override
_MyScaleAnimationScreenState createState() => _MyScaleAnimationScreenState();
}
class _MyScaleAnimationScreenState extends State<MyScaleAnimationScreen> with SingleTickerProviderStateMixin{
AnimationController myAnimationController;
@override
void initState() {
super.initState();
myAnimationController = AnimationController(duration: Duration(seconds: 5), vsync: this);
myAnimationController.forward();
}
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topCenter,
color: Colors.orangeAccent,
child: AnimatedBuilder(
animation: myAnimationController,
child: Container(
child: Image.asset(‘images/codingwithdhrumil.png’),
),
builder: (context, widget) => Transform.scale(
scale: myAnimationController.value * 0.8,
child: widget,
),
),
);
}
}
Flutter Skew Transform Animation
class MySkewAnimationScreen extends StatefulWidget {
@override
_MySkewAnimationScreenState createState() => _MySkewAnimationScreenState();
}
class _MySkewAnimationScreenState extends State<MySkewAnimationScreen> with SingleTickerProviderStateMixin{
AnimationController myAnimationController;
@override
void initState() {
super.initState();
myAnimationController = AnimationController(duration: Duration(seconds: 5), vsync: this);
myAnimationController.forward();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.redAccent,
alignment: Alignment.center,
child: AnimatedBuilder(
animation: myAnimationController,
child: Container(
width: 300,
height: 300,
child: Image.asset(‘images/codingwithdhrumil.png’),
),
builder: (context, widget) => Transform(
transform: Matrix4.skewY(myAnimationController.value * 0.6),
child: widget,
),
),
);
}
}
Pingback: Bounce Animation for Button in Flutter - CodingWithDhrumil