Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: how to control animation from parent

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'));
  }
}
like image 634
JakesMD Avatar asked Oct 15 '22 10:10

JakesMD


People also ask

What are staggered animations?

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 .

How do I stop an animation from repeating on Flutter?

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.

What makes animation controller different from timer in Flutter?

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.


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'));
  }
}
like image 186
Andrey Turkovsky Avatar answered Nov 21 '22 07:11

Andrey Turkovsky