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.

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