This tutorial shows you how to use SlideTransition in Flutter.
In Flutter, it's very easy to apply a transition animation to a widget. What you need to do is wrap the widget where the transition animation will be applied on as the child of SlideTransition widget. Then, create an Animation<Offset> to define the transition.
Creating SlideTransition Animation
Below is SlideTransition's constructor.
const SlideTransition({
Key key,
@required Animation<Offset> position,
this.transformHitTests = true,
this.textDirection,
this.child,
})As you can see on the constructor, it requires you to pass an Animation<Offset>. In order to create an Animation<Offset> you need to have an AnimationController, which requires you to have a State class with TickerProviderStateMixin for its vsync argument.
The below code is a basic example of how to use SlideTransition in Flutter. The duration of the animation is set in the AnimationController. In this example, we are going to use a Tween<Offset> animation where the widget's initial x offset is -0.5 and the final x offset is 0.5.
class _AnimatedCrossFadeExampleState extends State<_AnimatedCrossFadeExample> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..forward();
_animation = Tween<Offset>(
begin: const Offset(-0.5, 0.0),
end: const Offset(0.5, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInCubic,
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Builder(
builder: (context) => Center(
child: SlideTransition(
position: _animation,
child: Text('Woolha.com', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
),
)
),
);
}
}Output:
Setting Text Direction
If you don't pass textDirection or set it to TextDirection.ltr, positive x offsets move the widget towards the right. If the property value is set to TextDirection.rtl, positive x offsets move the widget towards the left. Here's the result with the same animation, but textDirection is set to TextDirection.rtl.
SlideTransition(
position: _animation,
textDirection: TextDirection.rtl,
child: Text('Woolha.com', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
)Output:
Setting transformHitTests
By default, transformHitTests is set to true which makes the widget clickable at the position it is currently painted on the screen. Setting transformHitTests to false causes the widget to be clickable only at the origin position and it's usually used when the animation is very fast and the widget is back to its origin position at the end.
To make it more obvious, we are going to have examples with a clickable button that will show a SnackBar when it's clicked. In the first example, transformHitTests is set to true.
SlideTransition(
position: _animation,
transformHitTests: true,
child: RaisedButton(
child: Text('Woolha.com'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Button is pressed'))
);
},
),
)Output:
The origin position of the button is right on the center. You can see in the above result that the button is clickable on the area where it is painted.
In the second example, we set transformHitTests to false.
SlideTransition(
position: _animation,
transformHitTests: false,
child: RaisedButton(
child: Text('Woolha.com'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Button is pressed'))
);
},
),
)Output:
As you can see, you can only click the button on its origin position which is right on the center.
Full Code
Below is the full code of this tutorial.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Woolha.com Flutter Tutorial',
home: _AnimatedCrossFadeExample(),
);
}
}
class _AnimatedCrossFadeExample extends StatefulWidget {
@override
_AnimatedCrossFadeExampleState createState() =>
new _AnimatedCrossFadeExampleState();
}
class _AnimatedCrossFadeExampleState extends State<_AnimatedCrossFadeExample> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..forward();
_animation = Tween<Offset>(
begin: const Offset(-0.5, 0.0),
end: const Offset(0.5, 0.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInCubic,
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Builder(
builder: (context) => Center(
child: SlideTransition(
position: _animation,
transformHitTests: true,
textDirection: TextDirection.ltr,
child: RaisedButton(
child: Text('Woolha.com'),
onPressed: () {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Button is pressed'))
);
},
),
),
)
),
);
}
}
Properties
Here's the list of properties you can use to for SlideTransition.
Key key: The widget key, used to control if it should be replaced.Animation<Offset> position*: The animation that controls the position of the child.bool transformHitTests: Whether hit testing should be affected by the slide animation.TextDirection textDirection: Direction of the x offset.Widget child: The widget below this widget in the tree, where the slide transition animation will be applied on.
*: required
Summary
That's how to use SlideTransition. You can also read about:
FadeTransition, a widget that animates the opacity of its child widget.RotationTransition, a widget for creating rotation animation.ScaleTransition, a widget for creating scale animation.AnimatedSwitcher, a widget for creating animation when switching between two widgets.
