I need to start an animation of a child widget from a parent widget. How can I do this?
I've tried giving the parent the controller, but then how do you replace vsync: this
?
This is the basic code (I haven't actually tested this code yet, but I shows what I mean):
import 'package:flutter/material.dart';
class ParentWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ChildText(),
FlatButton(
child: Text('start the animation'),
onPressed: () {
// start the animation!!!????????
},
)
],
);
}
}
class ChildText extends StatefulWidget {
@override
_ChildTextState createState() => _ChildTextState();
}
class _ChildTextState extends State<ChildText> with TickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
// actual animation is much more complex, this is just a random demo
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
_animation = Tween(begin: -1.0, end: 100.0).animate(CurvedAnimation(
parent: _controller,
curve: Curves.fastOutSlowIn,
));
}
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0, _animation.value),
child: Text('Text with fancy animation'));
}
}
A staggered animation consists of sequential or overlapping animations. To create a staggered animation, use multiple Animation objects. One AnimationController controls all of the Animation s. Each Animation object specifies the animation during an Interval .
Lottie Animation — Properties > Reverse: This property is used to reverse the motion in the animation. > Repeat: This property is used to keep repeating the animation. You will use false, then repeat animation will be stopped.
Timer is unrelated to Flutter, and is just a timer like you'd fine in any other language. On the other hand, AnimationController (and Ticker , its equivalent of Timer ) is Flutter specific. The difference with a Timer is that, by using AnimationController , the "ticker" can be muted, slowed, or mocked.
You can try this:
class ParentWidget extends StatefulWidget {
@override
_ParentWidget createState() => _ParentWidget();
}
class _ParentWidget extends State<ParentWidget> with TickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 2));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ChildText(_controller),
FlatButton(
child: Text('start the animation'),
onPressed: () {
// start the animation!!!
_controller.forward();
},
)
],
);
}
}
class ChildText extends StatefulWidget {
ChildText(this._controller);
final AnimationController _controller;
@override
_ChildTextState createState() => _ChildTextState();
}
class _ChildTextState extends State<ChildText> with TickerProviderStateMixin {
Animation _animation;
@override
void initState() {
super.initState();
_animation = Tween(begin: -1.0, end: 100.0).animate(CurvedAnimation(
parent: widget._controller,
curve: Curves.fastOutSlowIn,
));
}
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0, _animation.value),
child: Text('Text with fancy animation'));
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With