How to set duration of Transform.translate() animation in flutter?

Question

I am currently trying to learn flutter and trying to make a tic tac toe game in flutter. I want my game such that when I tap on a tile, the circles and crosses fall from above. I am trying to implement this using Transform.Translate() twice. Like this

GridTile(
          child: Transform.translate(
            child: Transform.translate(
              child: Image.asset(
                MultiPlayerGameLogic().imageProvider(i),
                fit: BoxFit.scaleDown,
              ),
              offset: Offset(0, -1000),
            ),
            offset: Offset(0, 1000),
          ),
        )

But this happens instantly and no animation can be seen. I want to set the duration of outer Transform.translate(). But cannot find any way to do so.

Isadora

because Transform.translate does not provide any animation - you would need AnimatedAlign / AlignTransition / SlideTransition or similar widgets – Leora

Can you show me how to implement any of them for the animation to work as intended? – Isadora

Just wrap your widget using the above mentioned widget and look out the documentation about the widget that you are using, that's how you should learn and if you stuck at any point, then let us know or post another question. Good Luck! – Kaltman

Okay. I'll try. Thanks – Isadora

Answer 1

Screenshot:

---

Code:

You need to wrap your Transform widget into another widget like an AnimatedBuilder or AnimatedWidget.

For example:

class _MyPageState extends State<MyPage> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    ); // <-- Set your duration here.
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(0, 100 * _controller.value),
            child: FlutterLogo(size: 100),
          );
        },
      ),
    );
  }
}

Eldoneldora

Answer 2

I'm using Transform.translate() with Animation

    AnimationController controller;
    Animation<double> animation;

    @override
    void initState() {
       super.initState();
        controller = new AnimationController(
           duration: Duration(seconds: 3), vsync: this)..addListener(() => 
           setState(() {}));
        animation = Tween(begin: -500.0, end: 500.0).animate(controller);
        controller.forward();
     }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          body: Transform.translate(
           child: Image.asset('image_path'),
           offset: Offset(animation.value, 0.0),
      ));
    }

    @override
    void dispose() {
      controller.dispose();
      super.dispose();
    }

Moise

Answer 3

You can use AnimatedContainer:

import 'package:vector_math/vector_math_64.dart' as math;

AnimatedContainer(
  duration: Duration(milliseconds: 500),
  transform: Matrix4.translation(math.Vector3(10, 20, 30)),
  child: Image.asset(
    MultiPlayerGameLogic().imageProvider(i),
    fit: BoxFit.scaleDown,
  ),
),

Colt