Flutter: how to control animation from parent

Question

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')); } }

hardanger · Accepted Answer · 2020-07-01 11:46:24Z

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')); } }

Collectives™ on Stack Overflow

Flutter: how to control animation from parent

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related