Flutter: how to control animation from parent

user_11979688 0
Viewed 1754

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'));
  }
}
flutter animation
1 Answers

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