CODEWITHSUNDEEP
flutterflutter-animation
SIMMORSAL
SIMMORSAL

Reputation: 1674

Applying Transform to a widget without redrawing the widget tree

Lets say I have this Stack:

Stack(
  children: [
    Column( // ==> I want to apply tranform (more specifically translate) on this
      children: [
        // a whole bunch of widgets
      ],
    ),
    Column( // ==> and this
      children: [
        // a whole bunch of widgets
      ],
    ),
  ],
);

There's two columns in the stack and each column has a huge tree of children inside of it.
What I want to do is move the columns on the screen on specific states.

One way to achieve this is to wrap each column in an AnimatedBuilder, but that would mean on each frame the whole widget tree would need to be recreated which is not ideal.

In native Android, there's this method that does what I need:
someView.animate().translateX(100).withLayer();

Is there an equivalent to this in flutter, or any other way to achieve this?

Upvotes: 0

Views: 511

Answers (1)

SIMMORSAL
SIMMORSAL

Reputation: 1674

Thanks to @pskink, this is how it's done:

Stack(
    children: [
      AnimatedBuilder(
        animation: _animation,
        builder: (context, child) {
          return Transform.translate(
            offset: Offset(_animation.value, 0),
            child: child,
          );
        },
        child: Column(
          children: [
            // a whole bunch of widgets
          ],
        ),
      ),
      ...
    ],
  );

The widget that needs to change to make the transform happen is Transform.translate, so I put that in the builder class, and the rest of the tree that shouldn't be affected by it, I put in the AnimatedBuilder's child property.
Then the child is passed back to the builder method, where I can just give it to child property of what's inside the builder method, and it wouldn't be rebuilt.

Upvotes: 2

Related Questions