CODEWITHSUNDEEP
androidflutterdartflutter-layoutflutter-animation
Sam1112
Sam1112

Reputation: 123

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

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.

Upvotes: 10

Views: 16344

Answers (3)

Kucing Malaya
Kucing Malaya

Reputation: 465

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

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267534

Screenshot:

enter image description here

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

Upvotes: 9

Stanislav Bondar
Stanislav Bondar

Reputation: 6245

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

Upvotes: 7

Related Questions