Slide Animation in Flutter App
In this article, we are going to create slide animation from all sides left, right, top and bottom using flutter slide transition. You can also check out flutter animations related articles.
We implement custom flutter slide animation using Slide Transition widget. Using Slide Transition, we can animate any widget from its position. Slide Transition widget has many properties. position attribute is used to change widget position to animate using Tween widget. We can define widget to animate using child property of SlideTransition widget.
Create UI to launch Flutter Slide Animation
import ‘package:flutterslideanimationsample/my_slide_left_transition.dart’;
import ‘my_animated_ui.dart’;
import ‘my_slide_bottom_transition.dart’;
import ‘my_slide_right_transition.dart’;
import ‘my_slide_top_transition.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 Slide Transition Sample’)),
body: Container(
margin: EdgeInsets.all(25),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ElevatedButton(
child: Text(‘Left Slide Transition’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.lightGreenAccent,
padding: EdgeInsets.all(15)
),
onPressed: () {
Navigator.of(context).push(MySlideLeftTransition(widget: MyAnimatedUI()));
},
),
SizedBox(height: 30),
ElevatedButton(
child: Text(‘Right Slide Transition’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.purpleAccent,
padding: EdgeInsets.all(15)
),
onPressed: () {
Navigator.of(context).push(MySlideRightTransition(widget: MyAnimatedUI()));
},
),
SizedBox(height: 30),
ElevatedButton(
child: Text(‘Top Slide Transition’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.amberAccent,
padding: EdgeInsets.all(15),
),
onPressed: () {
Navigator.of(context).push(MySlideTopTransition(widget: MyAnimatedUI()));
}),
SizedBox(height: 30),
ElevatedButton(
child: Text(‘Bottom Slide Transition’,style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
style: ElevatedButton.styleFrom(
primary: Colors.deepOrangeAccent,
padding: EdgeInsets.all(15),
),
onPressed: () {
Navigator.of(context).push(MySlideBottomTransition(widget: MyAnimatedUI()));
},
),
],
),
),
);
}
}
Create UI to animate
class MyAnimatedUI extends StatefulWidget {
@override
_MyAnimatedUIState createState() => _MyAnimatedUIState();
}
class _MyAnimatedUIState extends State<MyAnimatedUI> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(“https://resources.premierleague.com/premierleague/photos/players/250×250/p14937.png”,width: 200,height: 200,scale: 0.1,),
SizedBox(height: 50),
Text(“Cristiano Ronaldo”, style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Text(“Forward”, style: TextStyle(fontSize: 20)),
],
)
),
);
}
}
Flutter Left Slide Transition
class MySlideLeftTransition extends PageRouteBuilder {
final Widget widget;
MySlideLeftTransition({@required this.widget})
: super(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return widget;
},
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: child,
);
}
);
}
Flutter Right Slide Transition
class MySlideRightTransition extends PageRouteBuilder {
final Widget widget;
MySlideRightTransition({@required this.widget})
: super(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return widget;
},
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: child,
);
}
);
}
Flutter Top Slide Animation
class MySlideTopTransition extends PageRouteBuilder {
final Widget widget;
MySlideTopTransition({@required this.widget})
: super(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return widget;
},
transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, -1.0),
end: Offset.zero,
).animate(animation),
child: child,
);
}
);
}
Flutter Bottom Slide Animation
class MySlideBottomTransition extends PageRouteBuilder {
final Widget widget;
MySlideBottomTransition({@required this.widget})
: super(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return widget;
},
transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(0.0, 1.0),
end: Offset.zero,
).animate(animation),
child: child,
);
// transitionDuration:Duration(seconds: 1);
}
);
}
Pingback: Confetti Animation Flutter Example - CodingWithDhrumil